Benchmark: dadsdsad - MeasureThat.net

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",
     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",
      { 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: 2 years ago)

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

Browser/OS: Chrome 100 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Inline SVG	286193.9 Ops/sec
Div	295990.2 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided JSON and explain what's being tested, compared, and the pros/cons of each approach.

**Benchmark Overview**

The benchmark tests two different React-related components: `SVGInline` and `DivTest`. Both tests use the `ReactDOM.render()` method to render their respective components into an HTML element (`#main`) on a webpage.

**Script Preparation Code**

The script preparation code is identical for both tests. It defines two functions, `SVGInline` and `DivTest`, which return React elements using the `React.createElement()` function. The `SVGInline` function creates an SVG inline element with a custom path, while the `DivTest` function creates a simple `div` element.

**Html Preparation Code**

The HTML preparation code is also identical for both tests. It includes:

1. A `<svg>` element with a `position: absolute; width: 0; height: 0` style, which is likely used to create a container for the React elements.
2. A `<defs>` section that defines an SVG symbol (`umbrella`) with a custom path.
3. Two script tags that load the React and React DOM libraries.

**Individual Test Cases**

There are two test cases:

1. **Inline SVG**: Renders the `SVGInline` component using `ReactDOM.render()`.
2. **Div**: Renders the `DivTest` component using `ReactDOM.render()`.

**Comparison and Pros/Cons**

The comparison between these two tests is likely to measure the performance difference between rendering an inline SVG element versus a simple `div` element using React.

Pros of testing both:

* Provides a comprehensive understanding of how different components affect React's performance.
* Allows for more accurate benchmarking, as it accounts for differences in render complexity and DOM manipulation.

Cons of testing both:

* May result in less meaningful results, as the tests are comparing similar rendering patterns (both use `ReactDOM.render()`).
* Requires more resources to run, as two separate benchmarks need to be executed.

**Performance Results**

The latest benchmark result shows that Chrome 100 on a Mac OS X 10.15.7 desktop device achieves:

1. **Div**: 295990 executions per second.
2. **Inline SVG**: 286193 executions per second.

These results suggest that rendering the `DivTest` component is slightly faster than rendering the `SVGInline` component, but the difference is relatively small.

Related benchmarks:

dadsdsad (version: 0)

Comparing performance of: Inline SVG vs Div

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