querySelectorAll vs Custom Query Method
JavaScript performance comparison
Preparation code
<script>
(function(win){
'use strict';
var doc = win.document, simpleRe = /^(#?[\w-]+|\.[\w-.]+)$/, periodRe = /\./g, slice = [].slice;
win.query = function(selector, context){
context = context || doc;
if(simpleRe.test(selector)){
switch(selector.charAt(0)){
case '#':
return context.getElementById(selector.substr(1));
case '.':
return slice.call(context.getElementsByClassName(selector.substr(1).replace(periodRe, ' ')));
default:
return slice.call(context.getElementsByTagName(selector));
}
}
return slice.call(context.querySelectorAll(selector));
};
})(this);
</script>
<div id="foo" class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
Preparation code output
<div id="foo" class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
Test runner
Warning! For accurate results, please disable Firebug before running the tests. (Why?)
Java applet disabled.
Test | Ops/sec | |
---|---|---|
querySelectorAll
|
|
pending… |
query
|
|
pending… |
Compare results of other browsers
Revisions
You can edit these tests or add even more tests to this page by appending /edit
to the URL.
- Revision 4: published Ryan Morr
- Revision 5: published Ryan Morr
- Revision 6: published Ryan Morr
- Revision 7: published Ryan Morr
- Revision 12: published Ryan Morr
- Revision 13: published
- Revision 14: published
- Revision 15: published
- Revision 16: published Ryan Morr
- Revision 17: published
- Revision 18: published
- Revision 19: published
- Revision 20: published
- Revision 21: published
0 Comments