Run results for: Element creation speed

Run details:

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: Chrome 63

Operating system: Windows

Device Platform: Other

Date tested: 6 years ago

Test name	Executions per second
Procedural Element creation	50278.4 Ops/sec
jQuery Element creation	14972.7 Ops/sec
Custom Method: document.CreateElementFromHTML()	30775.5 Ops/sec
Custom Method: HTMLElement.From()	29190.8 Ops/sec

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 () {
				const rgx = /(\S+)=(["'])(.*?)(?:\2)|(\w+)/g;
				return function CreateElementFromHTML(html) {
					html = html.trim();
					var idx = html.indexOf('>') + 1;
					var elemStart = html.substr(0, idx);
					html = html.substr(idx).SubstrBeforeLast('<');
					rgx.lastIndex = 0;
					var elem = document.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 = html;
					return elem;
				};
			}())
		});
	}());

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;

Run results for: Element creation speed

Comparing speed of creating elements

Procedural Element creation

jQuery Element creation

Custom Method: document.CreateElementFromHTML()

Custom Method: HTMLElement.From()