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 StringPrototypeExtensions() {
		assignProps(String.prototype, {
			ReplaceAll: function ReplaceAll(sequence, value) {
				return this.split(sequence).join(value);
			},
			TrimStart: function TrimStart(ch) {
				var str = this;
				if (ch == null || !ch.length) { ch = ' '; }
				var len = ch.length;
				while (str.startsWith(ch)) { str = str.substr(len); }
				return str;
			},
			TrimEnd: function TrimEnd(ch) {
				var str = this;
				if (ch == null || !ch.length) { ch = ' '; }
				var len = ch.length;
				while (str.endsWith(ch)) { str = str.substr(0, str.length - len); }
				return str;
			},
			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 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);
		}
	}

Tests:

Procedural Element creation
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; return el;
jQuery Element creation
return $(`<link id="zinject_reddit_css" type="text/css" rel="stylesheet" async="" defer="" data-srcprop="href" data-src="standalone/reddit/zinject.reddit.css">`);
Custom Method
return document.CreateElementFromHTML(`<link id="zinject_reddit_css" type="text/css" rel="stylesheet" async="" defer="" data-srcprop="href" data-src="standalone/reddit/zinject.reddit.css">`);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Procedural Element creation
jQuery Element creation
Custom Method

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

A challenging benchmarking result!

After analyzing the code, I notice that the HTML Preparation Code uses a custom `document.CreateElementFromHTML` method, which is not a standard JavaScript function. This method seems to be a custom implementation of element creation using regular expressions.

The Benchmark Definitions for "Procedural Element creation" and "Custom Method" create elements with similar attributes, but the custom method uses a more complex regular expression (`rgxTag.exec(strelem)[1]`) to extract the tag name from the HTML string. This might be where the performance difference lies.

For "jQuery Element creation", the code uses jQuery's `$` function to create an element, which is likely to be faster than the custom method due to jQuery's optimized DOM manipulation functions.

Given these observations, I would hypothesize that:

1. The Custom Method will have a slower execution time compared to Procedural Element creation.
2. The Custom Method and jQuery Element creation will have similar performance profiles, with the latter being potentially faster due to jQuery's optimized DOM manipulation functions.

To confirm this hypothesis, further testing or optimization of the custom method might be necessary to bridge the performance gap.

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36

Browser/OS: Chrome 67 on Mac OS X 10.13.3

View result in a separate tab

Test name	Executions per second
Procedural Element creation	191119.6 Ops/sec
jQuery Element creation	32699.6 Ops/sec
Custom Method	114035.9 Ops/sec

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

Created: 6 years ago by: Guest

Jump to the latest result

Procedural Element creation

jQuery Element creation

Custom Method

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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