Benchmark: Element creation speed

HTML Preparation code:

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

Script Preparation code:

	function assignProps(proto, obj) {
		var descriptors = Object.getOwnPropertyDescriptors(obj);
		for (var desc in descriptors) {
			var prop = descriptors[desc];
			prop.enumerable = false;
			Object.defineProperty(proto, desc, prop);
		}
	}


	(function StringPrototypeExtensions() {
		assignProps(String.prototype, {
			SubstrBefore: function substrBefore(sequence, bIncludeSequence) {
				var idx = this.indexOf(sequence);
				if (idx >= 0) {
					if (bIncludeSequence) { idx += sequence.length; }
					if (idx <= this.length) { return this.substr(0, idx); }
				}
				return this;
			},
			SubstrAfter: function substrAfter(sequence, bIncludeSequence) {
				var idx = this.indexOf(sequence);
				if (idx >= 0) {
					if (!bIncludeSequence) { idx += sequence.length; }
					if (idx <= this.length) { return this.substr(idx); }
				}
				return this;
			},
			SubstrBeforeLast: function substrBeforeLast(sequence, bIncludeSequence) {
				var idx = this.lastIndexOf(sequence);
				if (idx >= 0) {
					if (bIncludeSequence) { idx += sequence.length; }
					if (idx <= this.length) { return this.substr(0, idx); }
				}
				return this;
			},
			SubstrAfterLast: function substrAfterLast(sequence, bIncludeSequence) {
				var idx = this.lastIndexOf(sequence);
				if (idx >= 0) {
					if (!bIncludeSequence) { idx += sequence.length; }
					if (idx <= this.length) { return this.substr(idx); }
				}
				return this;
			},
		});
	}());


	(function RegexPrototypeExtensions() {
		assignProps(RegExp.prototype, {
			GetMatches: function GetMatches(str) {
				this.lastIndex = 0;
				var matches = [], match = null;
				while (match = this.exec(str)) {
					matches.push(match);
				}
				return matches;
			},
		});
	}());


	(function DocumentExtensions() {
		assignProps(document, {
			CreateElementFromHTML: (function () {
				const rgxTag = /^\<(\w+)(?:\s+|\>)/;
				const rgxAttribs = /(\S+)=(["'])(.*?)(?:\2)/g;
				return function CreateElementFromHTML(html) {
					html = html.trim();
					var innerhtml = html.SubstrAfter('>').SubstrBeforeLast('<');
					var strelem = html.SubstrBefore('>', true);
					var tag = rgxTag.exec(strelem)[1];
					var attribs = rgxAttribs.GetMatches(strelem);
					var elem = document.createElement(tag);
					for (var i = 0, len = attribs.length; i < len; i++) {
						var match = attribs[i];
						elem.setAttribute(match[1], match[3]);
					}
					elem.innerHTML = innerhtml;
					return elem;
				};
			 }()),
		});
	}());


	(function ElementExtensions() {
		assignProps(HTMLElement, {
			From: (function (doc, rgx) {
				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;
Custom Method: document.CreateElementFromHTML()
var arr = Array(2); arr[0] = document.CreateElementFromHTML(`<link id="reddit_css" type="text/css" rel="stylesheet" async="" defer="" data-srcprop="href" data-src="sites/reddit/zinject.reddit.css">`); arr[1] = document.CreateElementFromHTML(`<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()
Custom Method: document.CreateElementFromHTML()
DOMParser

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days ago):

LLMs can make mistakes. Check important info.

It seems like you're providing a benchmarking result for different JavaScript methods of creating programmatic elements, such as HTML Links and a sidebar div.

Let's break down the results:

1. **Programmatic Element creation**: This test measures how fast a given browser can create an HTML element using various methods (e.g., jQuery, custom `HTMLElement.From()` method, or the `document.CreateElementFromHTML()` method). The top result here shows that Chrome 63 can execute this task at approximately 56,003 executions per second.

2. **Custom Method: HTMLElement.From()**: This test specifically measures how fast a given browser can use its own implementation of creating an HTML element using the custom `HTMLElement.From()` method. Here again, the top result indicates that Chrome 63 is quite efficient in this task as well, with around 32,029 executions per second.

3. **Custom Method: document.CreateElementFromHTML()**: This test evaluates how fast a given browser can use its own implementation of creating an HTML element using the `document.CreateElementFromHTML()` method. The top result here shows that Chrome 63 excels at this task, achieving around 31,690 executions per second.

4. **jQuery Element creation**: This test measures how quickly a browser can create an HTML element using jQuery's `HTMLElement.From()` method. While not the fastest (with about 12,038 executions per second), it still shows that Chrome 63 is relatively efficient in this task.

5. **DOMParser**: This test specifically evaluates how fast a browser can use its own implementation of parsing and manipulating HTML content using the DOMParser API. Here again, Chrome 63 shines with around 15,184 executions per second.

Overall, these results indicate that Chrome 63 is generally quite efficient when it comes to creating or manipulating HTML elements in different ways.

Latest run results:

Run details: (Test run date: 6 years ago)

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

Browser/OS: Chrome 63 on Windows

View result in a separate tab

Test name	Executions per second
Programmatic Element creation	56003.2 Ops/sec
jQuery Element creation	15184.2 Ops/sec
Custom Method: HTMLElement.From()	32029.9 Ops/sec
Custom Method: document.CreateElementFromHTML()	31690.6 Ops/sec
DOMParser	12038.0 Ops/sec

Related benchmarks:

Element creation speed (version: 0)

Comparing speed of creating elements

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

Created: 6 years ago by: Guest

Jump to the latest result

Programmatic Element creation

jQuery Element creation

Custom Method: HTMLElement.From()

Custom Method: document.CreateElementFromHTML()

DOMParser

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days ago):