<!doctype html>
<html>
<head>
- <title>Test Event Handling Performance</title>
+ <title>Test .closest() Performance</title>
<script src="benchmark.js"></script>
<script src="jquery-basis.js"></script>
<script>var old = jQuery.noConflict(true);</script>
jQuery(function ready() {
var node = $("#child"), name;
- [".zoo", "#zoo", "[data-foo=zoo]", "#nonexistant"].forEach(function foreach(item) {
- name = "closest '" + item + "'";
- console.log(name);
+ jQuery.each([".zoo", "#zoo", "[data-foo=zoo]", "#nonexistant"], function(i, item) {
+ setTimeout(function(){
+ name = "closest '" + item + "'";
- console.log("new", benchmarkString("$('#child').closest('" + item + "')", 5000, name));
- console.log("old", benchmarkString("old('#child').closest('" + item + "')", 5000, name));
+ jQuery("#results").append("<li>" + name + "<ul>" +
+ "<li>new: " + benchmarkString("$('#child').closest('" + item + "')", 2500, name) + "</li>" +
+ "<li>old: " + benchmarkString("old('#child').closest('" + item + "')", 2500, name) + "</li>"
+ + "</ul></li>");
+ }, 100);
});
});
- </script>
+ </script>
</head>
<body>
<div>
</div>
</div>
</div>
+ <ul id="results"></ul>
</body>
</html>