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

Tests:

Procedural Element creation
var arr = Array(2); var el = document.createElement('link'); el.id='ZInject_CSS_zinject_regexr'; el.type='text/css'; el.rel='stylesheet'; el.dataset.srcprop='href'; el.dataset.src='standalone/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="zinject_reddit_css" type="text/css" rel="stylesheet" async="" defer="" data-srcprop="href" data-src="standalone/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: document.CreateElementFromHTML()
var arr = Array(2); arr[0] = document.CreateElementFromHTML(`<link id="zinject_reddit_css" type="text/css" rel="stylesheet" async="" defer="" data-srcprop="href" data-src="standalone/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;
Custom Method: HTMLElement.From()
var arr = Array(2); arr[0] = HTMLElement.From(`<link id="zinject_reddit_css" type="text/css" rel="stylesheet" async defer data-srcprop="href" data-src="standalone/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;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Procedural Element creation
jQuery Element creation
Custom Method: document.CreateElementFromHTML()
Custom Method: HTMLElement.From()

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

Browser/OS: Chrome 128 on Windows

View result in a separate tab

Test name	Executions per second
Procedural Element creation	203587.0 Ops/sec
jQuery Element creation	57242.8 Ops/sec
Custom Method: document.CreateElementFromHTML()	115507.4 Ops/sec
Custom Method: HTMLElement.From()	112515.9 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmarking data shows the performance of four different methods for creating elements:

1. Procedural Element creation: This method uses the `document.createElement()` API to create elements. It has the highest execution rate, with 49928.75390625 executions per second.
2. jQuery Element creation: This method uses the `$` function from jQuery to create elements. It has a lower execution rate than procedural element creation, but is still relatively fast, with 32710.693359375 executions per second.
3. Custom Method: document.CreateElementFromHTML(): This method uses a custom `CreateElementFromHTML()` function to create elements. It has a slightly slower execution rate than jQuery element creation, with 32040.919921875 executions per second.
4. Custom Method: HTMLElement.From(): This method uses a custom `From()` function from the HTMLElement class to create elements. It has the slowest execution rate, with only 15134.3466796875 executions per second.

Based on this data, it appears that procedural element creation is the fastest way to create elements, followed closely by Custom Method: document.CreateElementFromHTML(). The other two methods are significantly slower.

Related benchmarks:

Element creation speed (version: 0)

Comparing speed of creating elements

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

Created: 8 years ago by: Guest

Jump to the latest result

Procedural Element creation

jQuery Element creation

Custom Method: document.CreateElementFromHTML()

Custom Method: HTMLElement.From()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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