Benchmark: Element creation speed

HTML Preparation code:

<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();

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:141.0) Gecko/20100101 Firefox/141.0

Browser/OS: Firefox 141 on Windows

View result in a separate tab

Test name	Executions per second
Programmatic Element creation	362983.2 Ops/sec
jQuery Element creation	124054.2 Ops/sec
Custom Method: HTMLElement.From()	271686.2 Ops/sec
DOMParser	71833.5 Ops/sec

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

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**

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:

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: 8 years ago by: Guest

Jump to the latest result

Programmatic Element creation

jQuery Element creation

Custom Method: HTMLElement.From()

DOMParser

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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