Benchmark: Element creation speed

HTML Preparation code:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

​x
 
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
​

Script Preparation code:

Object.defineProperty(HTMLElement, 'From', {
  enumerable: false,
  value: (function (doc, rgx) {
    //https://www.measurethat.net/Benchmarks/Show/2149/0/element-creation-speed
    return function CreateElementFromHTML(html) {
      html = html.trim();
      var bodystart = html.indexOf('>') + 1, bodyend = html.lastIndexOf('<');
      var elemStart = html.substr(0, bodystart);
      var innerHTML = html.substr(bodystart, bodyend - bodystart);
      rgx.lastIndex = 0;
      var elem = doc.createElement(rgx.exec(elemStart)[4]);
      var match; while ((match = rgx.exec(elemStart))) {
        if (match[1] === undefined) {
          elem.setAttribute(match[4], "");
        } else {
          elem.setAttribute(match[1], match[3]);
        }
      }
      elem.innerHTML = innerHTML;
      return elem;
    };
  }(window.document, /(\S+)=(["'])(.*?)(?:\2)|(\w+)/g))
});

var domParser = new DOMParser();

 
Object.defineProperty(HTMLElement, 'From', {  enumerable: false,  value: (function (doc, rgx) {    //https://www.measurethat.net/Benchmarks/Show/2149/0/element-creation-speed    return function CreateElementFromHTML(html) {      html = html.trim();      var bodystart = html.indexOf('>') + 1, bodyend = html.lastIndexOf('<');      var elemStart = html.substr(0, bodystart);      var innerHTML = html.substr(bodystart, bodyend - bodystart);      rgx.lastIndex = 0;      var elem = doc.createElement(rgx.exec(elemStart)[4]);      var match; while ((match = rgx.exec(elemStart))) {        if (match[1] === undefined) {          elem.setAttribute(match[4], "");        } else {          elem.setAttribute(match[1], match[3]);        }      }      elem.innerHTML = innerHTML;      return elem;    };  }(window.document, /(\S+)=(["'])(.*?)(?:\2)|(\w+)/g))});​var domParser = new DOMParser();

Tests:

Programmatic Element creation
var arr = Array(2); var el = document.createElement('link'); el.id='reddit_css'; el.type='text/css'; el.rel='stylesheet'; el.setAttribute('data-srcprop', 'href'); el.setAttribute('data-src', 'sites/reddit/zinject.reddit.css'); el.async = true; el.defer = true; arr[0] = el; el = document.createElement('div'); el.id = 'somevalue'; el.className = 'sidebar'; el.innerHTML = `<div class='sb-handle'></div><div class='sb-track'></div>`; arr[1] = el; return arr;
var arr = Array(2);
var el = document.createElement('link');
el.id='reddit_css';
el.type='text/css';
el.rel='stylesheet';
el.setAttribute('data-srcprop', 'href');
el.setAttribute('data-src', 'sites/reddit/zinject.reddit.css');
el.async = true;
el.defer = true;
arr[0] = el;
el = document.createElement('div');
el.id = 'somevalue';
el.className = 'sidebar';
el.innerHTML = `<div class='sb-handle'></div><div class='sb-track'></div>`;
arr[1] = el;
return arr;
jQuery Element creation
var arr = Array(2); arr[0] = $(`<link id="reddit_css" type="text/css" rel="stylesheet" async defer data-srcprop="href" data-src="sites/reddit/zinject.reddit.css">`); arr[1] = $(`<div id='somevalue' class='sidebar'><div class='sb-handle'></div><div class='sb-track'></div></div>`); return arr;
var arr = Array(2);
arr[0] = $(`<link id="reddit_css" type="text/css" rel="stylesheet" async defer data-srcprop="href" data-src="sites/reddit/zinject.reddit.css">`);
arr[1] = $(`<div id='somevalue' class='sidebar'><div class='sb-handle'></div><div class='sb-track'></div></div>`);
return arr;
Custom Method: HTMLElement.From()
var arr = Array(2); arr[0] = HTMLElement.From(`<link id="reddit_css" type="text/css" rel="stylesheet" async defer data-srcprop="href" data-src="sites/reddit/zinject.reddit.css">`); arr[1] = HTMLElement.From(`<div id='somevalue' class='sidebar'><div class='sb-handle'></div><div class='sb-track'></div></div>`); return arr;
var arr = Array(2);
arr[0] = HTMLElement.From(`<link id="reddit_css" type="text/css" rel="stylesheet" async defer data-srcprop="href" data-src="sites/reddit/zinject.reddit.css">`);
arr[1] = HTMLElement.From(`<div id='somevalue' class='sidebar'><div class='sb-handle'></div><div class='sb-track'></div></div>`);
return arr;

DOMParser

var arr = Array(2);
var doc = domParser.parseFromString(`<link id="reddit_css" type="text/css" rel="stylesheet" async defer data-srcprop="href" data-src="sites/reddit/zinject.reddit.css">`, 'text/html');
arr[0] = doc.head.removeChild(doc.head.firstElementChild);
doc = domParser.parseFromString(`<div id='somevalue' class='sidebar'><div class='sb-handle'></div><div class='sb-track'></div></div>`, 'text/html');
arr[1] = doc.body.removeChild(doc.body.firstElementChild);
return arr;

 
var arr = Array(2);var doc = domParser.parseFromString(`<link id="reddit_css" type="text/css" rel="stylesheet" async defer data-srcprop="href" data-src="sites/reddit/zinject.reddit.css">`, 'text/html');arr[0] = doc.head.removeChild(doc.head.firstElementChild);doc = domParser.parseFromString(`<div id='somevalue' class='sidebar'><div class='sb-handle'></div><div class='sb-track'></div></div>`, 'text/html');arr[1] = doc.body.removeChild(doc.body.firstElementChild);return arr;

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
Programmatic Element creation
jQuery Element creation
Custom Method: HTMLElement.From()
DOMParser

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/109.0.0.0 Safari/537.36

Browser/OS: Chrome 109 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Programmatic Element creation	81233.5 Ops/sec
jQuery Element creation	17719.5 Ops/sec
Custom Method: HTMLElement.From()	8580.8 Ops/sec
DOMParser	4542.7 Ops/sec

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

I'll provide an explanation of the benchmark, its options, pros and cons, and other considerations.

Benchmark Overview

The benchmark measures the speed of different methods to create HTML elements in JavaScript. The test cases involve creating two types of elements: a link and a div. Each test case uses a different approach to create these elements:

Programmatic Element Creation: Creates a link element using document.createElement() and sets its attributes.
jQuery Element Creation: Uses jQuery's templating engine to create the same link and div elements.
Custom Method: HTMLElement.From(): Uses a custom method HTMLElement.From() to create the elements, which is defined in the benchmark preparation code.
DOMParser: Parses an HTML string using DOMParser and extracts the first child element.

Options Compared

The benchmark compares four different approaches:

Programmatic Element Creation: Using document.createElement() to create elements.
jQuery Element Creation: Using jQuery's templating engine to create elements.
Custom Method: HTMLElement.From(): Using a custom method defined in the benchmark preparation code.
DOMParser: Parsing an HTML string using DOMParser and extracting the first child element.

Pros and Cons of Each Approach

Programmatic Element Creation:
- Pros: Fast, lightweight, and widely supported.
- Cons: Requires manual attribute setting, which can be error-prone.
jQuery Element Creation:
- Pros: Convenient, flexible, and well-maintained library.
- Cons: Adds extra overhead due to the jQuery framework.
Custom Method: HTMLElement.From():
- Pros: Customizable, efficient, and lightweight.
- Cons: Requires defining a custom method, which can be non-trivial.
DOMParser:
- Pros: Fast, efficient, and handles HTML parsing automatically.
- Cons: May introduce additional overhead due to parsing and extraction.

Other Considerations

Browser Support: The benchmark uses Chrome 109 as the browser, but it's essential to consider other browsers' support for each approach.
Performance Variance: The performance results may vary depending on the specific use case, element complexity, and network latency.
Code Readability and Maintainability: Each approach has its trade-offs in terms of code readability and maintainability.

The benchmark provides a useful comparison of different methods for creating HTML elements in JavaScript, highlighting the pros and cons of each approach.

LLMs can make mistakes. Check important info.

I'll provide an explanation of the benchmark, its options, pros and cons, and other considerations.

**Benchmark Overview**

1. **Programmatic Element Creation**: Creates a link element using `document.createElement()` and sets its attributes.
2. **jQuery Element Creation**: Uses jQuery's templating engine to create the same link and div elements.
3. **Custom Method: HTMLElement.From()**: Uses a custom method `HTMLElement.From()` to create the elements, which is defined in the benchmark preparation code.
4. **DOMParser**: Parses an HTML string using `DOMParser` and extracts the first child element.

**Options Compared**

The benchmark compares four different approaches:

1. **Programmatic Element Creation**: Using `document.createElement()` to create elements.
2. **jQuery Element Creation**: Using jQuery's templating engine to create elements.
3. **Custom Method: HTMLElement.From()**: Using a custom method defined in the benchmark preparation code.
4. **DOMParser**: Parsing an HTML string using `DOMParser` and extracting the first child element.

**Pros and Cons of Each Approach**

1. **Programmatic Element Creation**:
	* Pros: Fast, lightweight, and widely supported.
	* Cons: Requires manual attribute setting, which can be error-prone.
2. **jQuery Element Creation**:
	* Pros: Convenient, flexible, and well-maintained library.
	* Cons: Adds extra overhead due to the jQuery framework.
3. **Custom Method: HTMLElement.From()**:
	* Pros: Customizable, efficient, and lightweight.
	* Cons: Requires defining a custom method, which can be non-trivial.
4. **DOMParser**:
	* Pros: Fast, efficient, and handles HTML parsing automatically.
	* Cons: May introduce additional overhead due to parsing and extraction.

**Other Considerations**

1. **Browser Support**: The benchmark uses Chrome 109 as the browser, but it's essential to consider other browsers' support for each approach.
2. **Performance Variance**: The performance results may vary depending on the specific use case, element complexity, and network latency.
3. **Code Readability and Maintainability**: Each approach has its trade-offs in terms of code readability and maintainability.

The benchmark provides a useful comparison of different methods for creating HTML elements in JavaScript, highlighting the pros and cons of each approach.

Related benchmarks:

Element creation speed (version: 0)

Speed of different methods to create elements.

Comparing performance of: Programmatic Element creation vs jQuery Element creation vs Custom Method: HTMLElement.From() vs DOMParser

Created: 7 years ago by: Guest

Jump to the latest result

Programmatic Element creation

jQuery Element creation

Custom Method: HTMLElement.From()