Benchmark: 【JiangNanGame】template vs createElement

Script Preparation code:

window.NewEle = function(id, tag, cssText, properties, wrap) { //创建新元素
    const ele = document.createElement(tag);
    ele.id = id;
    ele.setAttribute('style', cssText);
    Object.assign(ele, properties);
    wrap && wrap.appendChild(ele);
    return ele;
};

AخA
 
window.NewEle = function(id, tag, cssText, properties, wrap) { //创建新元素    const ele = document.createElement(tag);    ele.id = id;    ele.setAttribute('style', cssText);    Object.assign(ele, properties);    wrap && wrap.appendChild(ele);    return ele;};

Tests:

NewEle

'use strict';

const app = document.createElement('div');

for (let i = 0; i < 10000; i++) {
	const mydiv = NewEle('Z_0.5840766942292237', 'div', 'width: 216px; height: 164px; position: absolute; display: block; left: 619.3px; top: 206px; z-index: 370;', null);
    const myimg = NewEle(null, `img`, `position:absolute;clip:rect(0,auto,auto,0);top:0px`, {
    	src: 'images/Zombies/Zombie/Zombie.webp?&amp;ts=0.6870581495010164'
    }, mydiv);
    const myshadow = NewEle(null, 'div', 'left:75px;top:139px;', {
    	className: 'Shadow',
    }, mydiv);
    app.append(mydiv);
}

​x
 
'use strict';​const app = document.createElement('div');​for (let i = 0; i < 10000; i++) {    const mydiv = NewEle('Z_0.5840766942292237', 'div', 'width: 216px; height: 164px; position: absolute; display: block; left: 619.3px; top: 206px; z-index: 370;', null);    const myimg = NewEle(null, `img`, `position:absolute;clip:rect(0,auto,auto,0);top:0px`, {        src: 'images/Zombies/Zombie/Zombie.webp?&amp;ts=0.6870581495010164'    }, mydiv);    const myshadow = NewEle(null, 'div', 'left:75px;top:139px;', {        className: 'Shadow',    }, mydiv);    app.append(mydiv);}

innerHTML

'use strict';

const app = document.createElement('div');

const frag = document.createElement('template');	

for (let i = 0; i < 10000; i++) {
	frag.innerHTML = `<div id="Z_0.5840766942292237" style="width: 216px; height: 164px; position: absolute; display: block; left: 619.3px; top: 206px; z-index: 370;"><div class="Shadow" style="left:75px;top:139px;"></div><img style="position:absolute;clip:rect(0,auto,auto,0);top:0px" src="images/Zombies/Zombie/Zombie.webp?&amp;ts=0.6870581495010164"></div>`
    app.append(frag.content);
}

 
'use strict';​const app = document.createElement('div');​const frag = document.createElement('template');    ​for (let i = 0; i < 10000; i++) {    frag.innerHTML = `<div id="Z_0.5840766942292237" style="width: 216px; height: 164px; position: absolute; display: block; left: 619.3px; top: 206px; z-index: 370;"><div class="Shadow" style="left:75px;top:139px;"></div><img style="position:absolute;clip:rect(0,auto,auto,0);top:0px" src="images/Zombies/Zombie/Zombie.webp?&amp;ts=0.6870581495010164"></div>`    app.append(frag.content);}

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
NewEle
innerHTML

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36

Browser/OS: Chrome 115 on Windows

View result in a separate tab

Test name	Executions per second
NewEle	5.8 Ops/sec
innerHTML	4.3 Ops/sec

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

Let's break down the provided benchmark JSON and explain what's being tested, compared options, pros and cons, and other considerations.

Benchmark Definition

The benchmark is comparing two approaches to create and render HTML elements: NewEle (a custom function) and innerHTML (using a template element).

NewEle Function

The NewEle function creates a new HTML element with the specified ID, tag, CSS text, properties, and wrapping element. The purpose of this function is to create a self-contained HTML element that can be appended to another container.

Options Compared

Custom Function (NewEle): Creates a new HTML element using document.createElement() and sets its attributes manually.
innerHTML: Uses a template element to render the HTML content and appends it to the main container using app.append(frag.content).

Pros and Cons of Each Approach

NewEle Function:
- Pros: More control over the element's attributes, easier to reuse code snippets.
- Cons: Can be slower due to manual attribute setting, may not support all CSS properties or values.
innerHTML: Faster and more efficient for rendering complex HTML content, supports CSS properties and values out of the box. However, it can be less flexible for custom element creation.

Library and Its Purpose

There is no specific library mentioned in the benchmark JSON. The template element is a native HTML5 feature used to render dynamic content.

Special JS Feature or Syntax

There are no special JavaScript features or syntaxes being tested in this benchmark, as both approaches rely on standard JavaScript APIs.

Other Alternatives

Document Fragment: Instead of using a template element, you can use a document fragment (const frag = document.createElement('fragment')) to render HTML content. This approach is similar to innerHTML but may be faster for smaller content blocks.
V dom: A virtual DOM library that allows you to create and manipulate virtual DOM nodes, which can then be rendered to the real DOM.

Benchmark Considerations

When choosing between these approaches, consider the trade-off between control, flexibility, and performance. If you need more control over your elements' attributes or want to reuse code snippets, NewEle might be a better choice. However, if you're rendering complex HTML content and prioritize speed, innerHTML could be the way to go.

Keep in mind that this benchmark only compares two approaches, and there may be other factors to consider when choosing between them.

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark JSON and explain what's being tested, compared options, pros and cons, and other considerations.

**Benchmark Definition**

The benchmark is comparing two approaches to create and render HTML elements: `NewEle` (a custom function) and `innerHTML` (using a template element).

**NewEle Function**

The `NewEle` function creates a new HTML element with the specified ID, tag, CSS text, properties, and wrapping element. The purpose of this function is to create a self-contained HTML element that can be appended to another container.

**Options Compared**

* **Custom Function (NewEle)**: Creates a new HTML element using `document.createElement()` and sets its attributes manually.
* **innerHTML**: Uses a template element to render the HTML content and appends it to the main container using `app.append(frag.content)`.

**Pros and Cons of Each Approach**

* **NewEle Function**:
	+ Pros: More control over the element's attributes, easier to reuse code snippets.
	+ Cons: Can be slower due to manual attribute setting, may not support all CSS properties or values.
* **innerHTML**: Faster and more efficient for rendering complex HTML content, supports CSS properties and values out of the box. However, it can be less flexible for custom element creation.

**Library and Its Purpose**

There is no specific library mentioned in the benchmark JSON. The `template` element is a native HTML5 feature used to render dynamic content.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntaxes being tested in this benchmark, as both approaches rely on standard JavaScript APIs.

**Other Alternatives**

* **Document Fragment**: Instead of using a template element, you can use a document fragment (`const frag = document.createElement('fragment')`) to render HTML content. This approach is similar to `innerHTML` but may be faster for smaller content blocks.
* **V dom**: A virtual DOM library that allows you to create and manipulate virtual DOM nodes, which can then be rendered to the real DOM.

**Benchmark Considerations**

When choosing between these approaches, consider the trade-off between control, flexibility, and performance. If you need more control over your elements' attributes or want to reuse code snippets, `NewEle` might be a better choice. However, if you're rendering complex HTML content and prioritize speed, `innerHTML` could be the way to go.

Keep in mind that this benchmark only compares two approaches, and there may be other factors to consider when choosing between them.

Related benchmarks:

【JiangNanGame】template vs createElement (version: 3)

Comparing performance of: NewEle vs innerHTML

Created: one year ago by: Registered User

Jump to the latest result