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>

​x
 
<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"
    );
}

 
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"));
ReactDOM.render(React.createElement(SVGInline, null), document.querySelector("#main"));
Div
ReactDOM.render(React.createElement(DivTest, null), document.querySelector("#main"));
ReactDOM.render(React.createElement(DivTest, null), document.querySelector("#main"));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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 6 months ago):

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:

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

Individual Test Cases

There are two test cases:

Inline SVG: Renders the SVGInline component using ReactDOM.render().
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:

Div: 295990 executions per second.
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.

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 6 months ago):