Benchmark: Inline SVG w/ rect vs div w/ span

HTML Preparation code:

<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, },
      React.createElement("span", {}, "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 month ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.1.1 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Inline SVG	424126.1 Ops/sec
Div	433092.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

The provided JSON represents a benchmark test created on MeasureThat.net, which allows users to compare different approaches for rendering React components.

**Benchmark Definition:**

The test has two individual test cases:

1. "Inline SVG w/ rect vs div w/ span"
2. "Div"

Each test case uses the `ReactDOM.render` method to render a React component.

**Options Compared:**

In this benchmark, two options are compared:

* Inline SVG (using `React.createElement('svg', ...)` directly within the `ReactDOM.render` call)
* Div with Span (using `React.createElement('div', ...) and React.createElement('span', ...) separately within the `ReactDOM.render` call)

**Pros and Cons:**

1. **Inline SVG:**
	* Pros:
		+ Potential performance improvement due to reduced overhead of creating separate DOM elements.
		+ Can be beneficial for smaller components or those with simple rendering requirements.
	* Cons:
		+ May result in slower rendering times if the `svg` element is larger or more complex, as it's rendered directly within the DOM.
2. **Div with Span:**
	* Pros:
		+ Easier to maintain and debug, as separate elements can be manipulated independently.
		+ Suitable for components that require multiple elements or complex rendering logic.
	* Cons:
		+ May incur additional overhead due to the creation of separate DOM elements.

**Library Used:**

The benchmark uses the React library, which is a popular JavaScript library for building user interfaces. React provides a set of features and tools to make building and managing user interfaces more efficient and scalable.

In this benchmark, the `ReactDOM.render` method is used to render the components into the DOM. This method is responsible for creating and managing the virtual DOM (a lightweight in-memory representation of the actual DOM) and updating it when the component state changes.

**Special JS Features or Syntax:**

None of the provided code snippets use any special JavaScript features or syntax, such as async/await, Promises, or classes.

**Other Alternatives:**

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

* Use `React.createPortal` instead of `ReactDOM.render`, which can provide better performance and control over the component's lifecycle.
* Utilize server-side rendering (SSR) with libraries like Next.js or Gatsby, which can improve performance and SEO by rendering components on the server before sending them to the client.
* Experiment with other rendering methods, such as using a library like React Fiber or exploring alternative virtual DOM implementations.

Keep in mind that each approach has its trade-offs, and the best choice depends on your specific use case, performance requirements, and personal preferences.

Related benchmarks:

Inline SVG w/ rect vs div w/ span (version: 0)

Comparing performance of: Inline SVG vs Div

Created: 4 years ago by: Guest

Jump to the latest result

Inline SVG

Div

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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