Skip to content

Instantly share code, notes, and snippets.

@DerekZiemba

DerekZiemba/index.html

Last active March 24, 2018 05:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DerekZiemba/02fe05ed4fdd9ff6582f364b01673425 to your computer and use it in GitHub Desktop.
Save DerekZiemba/02fe05ed4fdd9ff6582f364b01673425 to your computer and use it in GitHub Desktop.
Download ZIP
Benchmark to find fastest way to create new HTMLElements and test jQuery version 1, 2, and 3. (https://jsbench.github.io/#02fe05ed4fdd9ff6582f364b01673425) #jsbench #jsperf
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Benchmark to find fastest way to create new HTMLElements and test jQuery version 1, 2, and 3. </title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<script src="./suite.js"></script>
</head>
<body>
<h1>Open the console to view the results</h1>
<h2><code>cmd + alt + j</code> or <code>ctrl + alt + j</code></h2>
</body>
</html>
Raw
suite.js
"use strict";
(function (factory) {
if (typeof Benchmark !== "undefined") {
factory(Benchmark);
} else {
factory(require("benchmark"));
}
})(function (Benchmark) {
var suite = new Benchmark.Suite;
Benchmark.prototype.setup = function () {
Element.From = (function () {
const doc = window.document;
const rgx = /(\S+)=(["'])(.*?)(?:\2)|(\w+)/g;
return function CreateElementFromHTML(html) { //Almost 3x performance compared to jQuery and only : https://www.measurethat.net/Benchmarks/Show/2147/0/element-creation-speed
var innerHtmlStart = html.indexOf('>') + 1;
var elemStart = html.substr(0, innerHtmlStart);
var match = rgx.exec(elemStart)[4];
var elem = doc.createElement(match);
while ((match = rgx.exec(elemStart)) !== null) {
if (match[1] === undefined) {
elem.setAttribute(match[4], "");
} else {
elem.setAttribute(match[1], match[3]);
}
}
elem.innerHTML = html.substr(innerHtmlStart, html.lastIndexOf('<') - innerHtmlStart);
rgx.lastIndex = 0; //reset regex
return elem;
};
}())
var _$ = window.$;
var restoreCount = 0;
function restore(){
restoreCount++;
if(restoreCount >= 3){
window.$ = _$;
}
}
var script3 = Element.From(`<script type="text/javascript" async defer src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>`);
script3.onload = function(){ window.jQ3 = $.noConflict(true); restore(); };
document.head.appendChild(script3);
var script2 = Element.From(`<script type="text/javascript" async defer src="https://code.jquery.com/jquery-2.2.4.min.js"></script>`);
script2.onload = function(){ window.jQ2 = $.noConflict(true); restore(); };
document.head.appendChild(script2);
var script1 = Element.From(`<script type="text/javascript" async defer src="https://code.jquery.com/jquery-1.12.4.min.js"></script>`);
script1.onload = function(){ window.jQ1 = $.noConflict(true); restore(); };
document.head.appendChild(script1);
};
suite.add("Manual Element Creation", function () {
//Manual 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;
var div = document.createElement('div');
div.id = 'somevalue';
div.className = 'sidebar';
div.innerHTML = `<div class='sb-handle'></div><div class='sb-track'></div>`;
arr[1] = div;
return arr;
});
suite.add("Custom: Element.From()", function () {
//Custom: Element.From()
var arr = Array(2);
arr[0] = Element.From(`<link id="reddit_css" type="text/css" rel="stylesheet" async defer data-srcprop="href" data-src="sites/reddit/zinject.reddit.css">`);
arr[1] = Element.From(`<div id='somevalue' class='sidebar'><div class='sb-handle'></div><div class='sb-track'></div></div>`);
return arr;
});
suite.add("jQuery v3 Element creation", function () {
//jQuery v3 Element creation
var arr = Array(2);
arr[0] = jQ3(`<link id="reddit_css" type="text/css" rel="stylesheet" async defer data-srcprop="href" data-src="sites/reddit/zinject.reddit.css">`);
arr[1] = jQ3(`<div id='somevalue' class='sidebar'><div class='sb-handle'></div><div class='sb-track'></div></div>`);
return arr;
});
suite.add("jQuery v2 Element creation", function () {
//jQuery v2 Element creation
var arr = Array(2);
arr[0] = jQ2(`<link id="reddit_css" type="text/css" rel="stylesheet" async defer data-srcprop="href" data-src="sites/reddit/zinject.reddit.css">`);
arr[1] = jQ2(`<div id='somevalue' class='sidebar'><div class='sb-handle'></div><div class='sb-track'></div></div>`);
return arr;
});
suite.add("jQuery v1 Element creation", function () {
//jQuery v1 Element creation
var arr = Array(2);
arr[0] = jQ1(`<link id="reddit_css" type="text/css" rel="stylesheet" async defer data-srcprop="href" data-src="sites/reddit/zinject.reddit.css">`);
arr[1] = jQ1(`<div id='somevalue' class='sidebar'><div class='sb-handle'></div><div class='sb-track'></div></div>`);
return arr;
});
suite.on("cycle", function (evt) {
console.log(" - " + evt.target);
});
suite.on("complete", function (evt) {
console.log(new Array(30).join("-"));
var results = evt.currentTarget.sort(function (a, b) {
return b.hz - a.hz;
});
results.forEach(function (item) {
console.log((idx + 1) + ". " + item);
});
});
console.log("Benchmark to find fastest way to create new HTMLElements and test jQuery version 1, 2, and 3. ");
console.log(new Array(30).join("-"));
suite.run();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment