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;
};

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?&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?&ts=0.6870581495010164"></div>` app.append(frag.content); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
NewEle
innerHTML

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

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: 2 years ago by: Registered User

Jump to the latest result

NewEle

innerHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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