Benchmark: Inline SVG (rect) vs div

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">
        <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>
	</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",
    { className: "office", xmlns: "http://www.w3.org/2000/svg", width: 190, height: 190, viewBox: "0 0 188.5 188.5" },
    React.createElement("rect", { height: 190, width: 190, fill: "#fff" })
  );
}

var DivTest = function() {
	return React.createElement(
      "div",
      { className: "office", width: 190, height: 190, },
      "Foo"
    );
}

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: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser/OS: Chrome 132 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Inline SVG	921923.6 Ops/sec
Div	1197968.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks and explore what's being tested in this specific benchmark.

**What is being tested?**

The provided JSON represents two test cases, each with its own script preparation code and HTML preparation code. The goal of these tests is to compare the performance of using an `svg` element inline with React (called "Inline SVG") versus rendering a `div` element with React (called "Div").

**Options compared:**

The two options being compared are:

1. **Inline SVG**: This approach uses the `svg` element directly within the React component, like this: `React.createElement("svg", ..., ...)`. The HTML preparation code includes an `svg` element in the DOM, which is then rendered by React.
2. **Div**: This approach uses a separate `div` element with React, like this: `React.createElement("div", ..., ...)`. The HTML preparation code creates a standalone `div` element in the DOM, which is then rendered by React.

**Pros and cons of each approach:**

* **Inline SVG:**
	+ Pros:
		- Can be faster since there's no extra DOM node to create.
		- Might require less JavaScript overhead due to fewer DOM manipulations.
	+ Cons:
		- May lead to increased CPU usage if the browser has to parse and render the `svg` element more frequently.
		- Could potentially result in slower performance if the `svg` element is large or complex.
* **Div:**
	+ Pros:
		- Can be faster for larger or more complex elements since they can be rendered by React without having to worry about parsing and rendering an `svg` element.
		- Might lead to better support for accessibility features since a separate `div` element is easier to style and interact with.
	+ Cons:
		- Requires creating an extra DOM node, which might increase CPU usage and JavaScript overhead.
		- Could result in slower performance if the browser has to render multiple `div` elements.

**Library and its purpose:**

The benchmark uses React, a popular JavaScript library for building user interfaces. In this case, React is used as a rendering engine to compare the performance of different approaches.

**Special JS feature or syntax:**

There doesn't appear to be any special JavaScript features or syntax being tested in this benchmark. The code appears to be standard JavaScript with React integration.

**Other alternatives:**

If you're interested in exploring alternative approaches, here are a few options:

1. **Using a different rendering engine**: Instead of using React, the benchmark could be modified to use another rendering engine like Angular or Vue.js.
2. **Using CSS-in-JS solutions**: The benchmark could explore the performance of using CSS-in-JS solutions like styled-components or emotion, which allow you to write CSS directly in your JavaScript code.
3. **Comparing different browser versions**: The benchmark could be modified to compare the performance of different browser versions to see how they handle the rendering of React components.

I hope this explanation helps! Let me know if you have any further questions.

Related benchmarks:

Inline SVG (rect) vs div (version: 0)

Comparing performance of: Inline SVG vs Div

Created: 5 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):