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

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

To answer this question, we'll need to analyze the provided code snippets and benchmark results.

**Code Analysis**

The code appears to be related to creating HTML elements using different methods:

1. **Procedural Element Creation**: The code uses `document.createElement()` to create an element.
2. **jQuery Element Creation**: The code uses jQuery's `$` function to create an element.
3. **Custom Method**: The code defines a custom method `CreateElementFromHTML()` that creates an element using a regular expression to extract attributes.

The HTML snippet contains a `<link>` element with various attributes, including `id`, `type`, `rel`, and `data-srcprop` and `data-src`.

**Benchmark Results**

The benchmark results show the execution rates for each test case:

1. **Procedural Element Creation**: 0 executions per second (no data)
2. **jQuery Element Creation**: 24812.876953125 executions per second
3. **Custom Method**: 75153.3125 executions per second

**Observations**

Based on the benchmark results, it appears that:

* The Custom Method is the fastest, followed by jQuery Element Creation.
* Procedural Element Creation is significantly slower.

This suggests that the custom method, which uses a regular expression to extract attributes, might be more efficient than using `document.createElement()` and then setting attributes individually. However, without more context or information about the code implementation, it's difficult to provide a definitive conclusion.

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

Jump to the latest result

Procedural Element creation

jQuery Element creation

Custom Method

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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