Benchmark: Div vs SVG (Flavio)

HTML Preparation code:

<svg className="container" xmlns="http://www.w3.org/2000/svg" style="position: absolute; width: 0; height: 0" width="0" height="0">
	<defs>
    <symbol id="umbrella" viewBox="0 0 32 32">
        <circle cx="12" cy="12" r="8" />
	</symbol>
	</defs>
</svg>

<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

<div id="main"></div>

Script Preparation code:

var SVGInline = function() {
  return React.createElement(
    "svg",
    { xmlns: "http://www.w3.org/2000/svg", width: 190, height: 190, fill: 'red', viewBox: "0 0 188.5 188.5",
     dangerouslySetInnerHTML: {
       __html: '<path d="M27 14h5c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0zM27 14c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0 14c0 1.112-0.895 2-2 2-1.112 0-2-0.896-2-2.001v-1.494c0-0.291 0.224-0.505 0.5-0.505 0.268 0 0.5 0.226 0.5 0.505v1.505c0 0.547 0.444 0.991 1 0.991 0.552 0 1-0.451 1-0.991v-14.009c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-5.415 6.671-9.825 15-9.995v-1.506c0-0.283 0.224-0.499 0.5-0.499 0.268 0 0.5 0.224 0.5 0.499v1.506c8.329 0.17 15 4.58 15 9.995h-5z"></path>'
     }
    },
  );
}

var DivTest = function() {
	return React.createElement(
      "div",
      { width: 190, height: 190, borderRadius: '50%', background: 'red' },
      ""
    );
}

Tests:

Inline SVG
ReactDOM.render(React.createElement(SVGInline, null), document.querySelector("#main"));
Div
ReactDOM.render(React.createElement(DivTest, null), document.querySelector("#main"));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Inline SVG
Div

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 months ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_5_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/139.0.7258.76 Mobile/15E148 Safari/604.1

Browser/OS: Chrome Mobile iOS 139 on iOS 18.5.0

View result in a separate tab

Test name	Executions per second
Inline SVG	1187639.2 Ops/sec
Div	1194638.1 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Definition JSON**

The benchmark is defined by two scripts: `SVGInline` and `DivTest`. Both scripts are created using React, a popular JavaScript library for building user interfaces.

The `SVGInline` script creates an SVG element with some inline styles. The `DivTest` script creates a simple `div` element with some inline styles as well.

**What's being tested?**

The benchmark compares the performance of rendering two different types of elements: SVGs and HTML `div`s. Specifically, it tests how quickly each type of element can be rendered by React.

**Options compared**

There are two options being compared:

1. **SVG**: The first test case renders an SVG element using React's `React.createElement` method.
2. **HTML Div**: The second test case renders an HTML `div` element using the same `React.createElement` method.

**Pros and Cons of each approach:**

* **SVG**: SVGs are often used for vector graphics, which can be more efficient to render than raster graphics like images or HTML `div`s. However, SVGs can also be more complex to parse and render, especially if they contain a lot of intricate shapes.
* **HTML Div**: HTML `div`s are simple elements that don't require any special rendering logic. They are often used for layout purposes and can be rendered quickly by React.

In general, the choice between using SVGs or HTML `div`s depends on the specific use case. If you need to display vector graphics, SVGs might be a better choice. However, if you're just looking for a simple way to render an element with some inline styles, an HTML `div` might be sufficient.

**Library and its purpose**

In this benchmark, React is used as the JavaScript library that handles rendering of both SVGs and HTML `div`s. React is a popular library for building user interfaces in JavaScript, and it provides a simple way to manage state changes and update the DOM efficiently.

The `dangerouslySetInnerHTML` property is also used in the benchmark, which allows you to set the inner HTML of an element directly. This can be useful for rendering complex layouts or displaying dynamic content.

**Special JS feature or syntax**

There doesn't appear to be any special JavaScript features or syntax being used in this benchmark. However, it's worth noting that React is a library that uses JSX (a syntax extension for JavaScript), but JSX isn't being used explicitly in the provided benchmark code.

**Other alternatives**

If you're looking for alternative libraries or approaches for building user interfaces, some options include:

* **Vue.js**: A popular JavaScript framework for building web applications.
* **Angular**: Another popular JavaScript framework for building web applications.
* **Preact**: A lightweight alternative to React that aims to provide better performance and smaller bundle sizes.

In terms of non-JavaScript approaches, you could consider using HTML and CSS alone to build your user interfaces. This can be a good option if you're looking for a more lightweight approach or if you're working with legacy browsers that don't support modern JavaScript features.

Related benchmarks:

Div vs SVG (Flavio) (version: 0)

Comparing performance of: Inline SVG vs Div

Created: 3 years ago by: Guest

Jump to the latest result

Inline SVG

Div

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):