Permalink
Browse files
Should improve performance of closest considerably. Benchmark proof i…
…n speed/closest.html
- Loading branch information...
Showing
with
62 additions
and 13 deletions.
- +8 −2 speed/benchmark.js
- +35 −0 speed/closest.html
- +19 −11 src/traversing.js
10
speed/benchmark.js
| @@ -1,9 +1,15 @@ | ||
| // Runs a function many times without the function call overhead | ||
| -function benchmark(fn, times){ | ||
| +function benchmark(fn, times, name){ | ||
| fn = fn.toString(); | ||
| var s = fn.indexOf('{')+1, | ||
| e = fn.lastIndexOf('}'); | ||
| fn = fn.substring(s,e); | ||
| - return new Function('i','var t=new Date;while(i--){'+fn+'};return new Date-t')(times); | ||
| + return benchmarkString(fn, times, name); | ||
| +} | ||
| + | ||
| +function benchmarkString(fn, times, name) { | ||
| + var fn = new Function("i", "var t=new Date; while(i--) {" + fn + "}; return new Date - t")(times) | ||
| + fn.displayName = name || "benchmarked"; | ||
| + return fn; | ||
| } |
35
speed/closest.html
| @@ -0,0 +1,35 @@ | ||
| +<!doctype html> | ||
| +<html> | ||
| +<head> | ||
| + <title>Test Event Handling Performance</title> | ||
| + <script src="benchmark.js"></script> | ||
| + <script src="jquery-basis.js"></script> | ||
| + <script>var old = jQuery.noConflict(true);</script> | ||
| + <script src="../dist/jquery.js"></script> | ||
| + <script> | ||
| + jQuery(function ready() { | ||
| + var node = $("#child"), name; | ||
| + | ||
| + [".zoo", "#zoo", "[data-foo=zoo]", "#nonexistant"].forEach(function foreach(item) { | ||
| + name = "closest '" + item + "'"; | ||
| + console.log(name); | ||
| + | ||
| + console.log("new", benchmarkString("$('#child').closest('" + item + "')", 5000, name)); | ||
| + console.log("old", benchmarkString("old('#child').closest('" + item + "')", 5000, name)); | ||
| + }); | ||
| + }); | ||
| + </script> | ||
| +</head> | ||
| +<body> | ||
| + <div> | ||
| + <p>Hello</p> | ||
| + <div class="zoo" id="zoo" data-foo="bar"> | ||
| + <div> | ||
| + <p id="child">lorem ipsum</p> | ||
| + <p>dolor sit amet</p> | ||
| + </div> | ||
| + </div> | ||
| + </div> | ||
| +</body> | ||
| +</html> | ||
| + |
30
src/traversing.js
| @@ -8,6 +8,8 @@ var runtil = /Until$/, | ||
| isSimple = /^.[^:#\[\.,]*$/, | ||
| slice = Array.prototype.slice; | ||
| +var POS = jQuery.expr.match.POS; | ||
| + | ||
| jQuery.fn.extend({ | ||
| find: function( selector ) { | ||
| // Handle "> div" child selectors and pass them to .children() | ||
| @@ -95,21 +97,27 @@ jQuery.fn.extend({ | ||
| return ret; | ||
| } | ||
| - var pos = jQuery.expr.match.POS.test( selectors ) ? | ||
| + var pos = POS.test( selectors ) ? | ||
| jQuery( selectors, context || this.context ) : null; | ||
| - ret = jQuery.map(this.get(),function( cur,i ) { | ||
| - while ( cur && cur.ownerDocument && cur !== context ) { | ||
| - if ( pos ? pos.index(cur) > -1 : jQuery(cur).is(selectors) ) { | ||
| - return cur; | ||
| - } | ||
| + var ret = []; | ||
| - cur = cur.parentNode; | ||
| - } | ||
| + for ( var i=0,j=this.length; i<j; i++ ) { | ||
jeresig
Need to add some extra spacing in here. Additionally we tend to use 'l' as our length variable in for loops. |
||
| + var cur = this[i]; | ||
| + | ||
| + while ( cur ) { | ||
| + if ( pos ? pos.index(cur) > -1 : jQuery.find.matches(selectors, [cur]).length ) { | ||
| + ret.push( cur ); | ||
| + break; | ||
| + } else { | ||
|
|
||
| + cur = cur.parentNode; | ||
| + if ( !cur.ownerDocument || cur === context ) { | ||
| + break; | ||
| + } | ||
| + } | ||
| + } | ||
| + } | ||
| - return null; | ||
| - }); | ||
| - | ||
| ret = ret.length > 1 ? jQuery.unique(ret) : ret; | ||
| return this.pushStack( ret, "closest", selectors ); | ||
Toss this up on the previous var list.