Last active
November 17, 2016 01:06
-
-
Save DerekZiemba/002bcf9243e6c097a07ede2ee2c789e1 to your computer and use it in GitHub Desktop.
Finding elements off cached selector speed (http://jsbench.github.io/#002bcf9243e6c097a07ede2ee2c789e1) #jsbench #jsperf
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<title>Finding elements off cached selector speed</title> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script> | |
<script src="https://code.jquery.com/jquery-3.1.1.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> | |
<div>stuff</div> | |
<div>stuff</div> | |
<div>stuff</div> | |
<div>stuff</div> | |
<div>stuff</div> | |
<div>stuff</div> | |
<div>stuff</div> | |
<h1>H1</h1> | |
<div>stuff</div> | |
<div>stuff</div> | |
<div>stuff</div> | |
<div>stuff</div> | |
<div>stuff</div> | |
<div class="div1"> | |
<span>stuff</span> | |
<span>stuff</span> | |
<span>stuff</span> | |
<span>stuff</span> | |
<span>stuff</span> | |
<span>stuff</span> | |
<span>stuff</span> | |
<span>stuff</span> | |
<h1> | |
<h3>H3</h3> | |
</h1> | |
<span>stuff</span> | |
<span>stuff</span> | |
<div class="div1"> | |
<span>stuff</span> | |
<span>stuff</span> | |
<div>stuff</div> | |
<div>stuff</div> | |
<div>stuff</div> | |
<div>stuff</div> | |
<span>stuff</span> | |
<span>stuff</span> | |
<h1> | |
<h3>H3</h3> | |
</h1> | |
<span>stuff</span> | |
<span>stuff</span> | |
<span>stuff</span> | |
<span>stuff</span> | |
<span>stuff</span> | |
<span><h3>H3</h3> | |
<h2>h2</h2> | |
</div> | |
<span>stuff</span> | |
<span>stuff</span> | |
<span><h3>H3</h3> | |
<h2>h2</h2> | |
</div> | |
<div>stuff</div> | |
<div>stuff</div> | |
<div>stuff</div> | |
<div>stuff</div> | |
<div class="div1">stuff</div> | |
<div>stuff</div> | |
<h2>h2</h2> | |
<div>stuff</div> | |
<div>stuff</div> | |
<div>stuff</div> | |
<div>stuff</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"use strict"; | |
(function (factory) { | |
if (typeof Benchmark !== "undefined") { | |
factory(Benchmark); | |
} else { | |
factory(require("benchmark")); | |
} | |
})(function (Benchmark) { | |
var suite = new Benchmark.Suite; | |
suite.add("document.querySelectorAll('.div1 h2, .div1 h3');", function () { | |
document.querySelectorAll('.div1 h2, .div1 h3'); | |
}); | |
suite.add("$(document.querySelectorAll('.div1 h2, .div1 h3'));", function () { | |
$(document.querySelectorAll('.div1 h2, .div1 h3')); | |
}); | |
suite.add("$('.div1 h2, .div1 h3');", function () { | |
$('.div1 h2, .div1 h3'); | |
}); | |
suite.add("var div = document.querySelectorAll('.div1')[0];", function () { | |
var div = document.querySelectorAll('.div1')[0]; | |
div.querySelectorAll("h2"); | |
div.querySelectorAll("h3"); | |
}); | |
suite.add("var div = $(\".div1\");", function () { | |
var div = $(".div1"); | |
div.find("h2"); | |
div.find("h3"); | |
}); | |
suite.add("$('.div1 h2');", function () { | |
$('.div1 h2'); | |
$('.div1 h3'); | |
}); | |
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("Finding elements off cached selector speed"); | |
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