$("#id") vs $(document.getElementById)
JavaScript performance comparison
Preparation code
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="LOL"></div>
<script>
var $el = $(0);
</script>
Preparation code output
Test runner
Warning! For accurate results, please disable Firebug before running the tests. (Why?)
Java applet disabled.
| Test | Ops/sec | |
|---|---|---|
#id |
|
pending… |
native |
|
pending… |
Sizzle |
|
pending… |
common mistake |
|
pending… |
native queryselectorall |
|
pending… |
native queryselector |
|
pending… |
manual jquery collection |
|
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. Here’s a list of current revisions for this page:
- Revision 1: published by Eric
- Revision 2: published by seutje
- Revision 3: published
- Revision 5: published by Eric
- Revision 7: published by ehynds
- Revision 9: published by Kyle Simpson
- Revision 10: published
- Revision 13: published by Mark McDonnell
- Revision 15: published
- Revision 16: published by altryne
- Revision 17: published
- Revision 19: published by ckozl
- Revision 20: published
- Revision 21: published
- Revision 22: published by Igor Reverser
2 comments
A thing to note, is that not all of these are cross-browser safe. jQuery and other libraries have their own wrappers for querySelectorAll and getElementById because they are broken in some cases. Notably when forms have conflicting names.
How often is an id selector the bottleneck in your application?
Look, it's curious, Chrome with lot or opened tables around of 90 tabs and and 1,791,364k memory of RAM, manual jquery collection get only 540,221 against 708,232 from ID.
Chrome 7.0.536 10,832 50,785 708,232 540,221 583,198 244,608 76,366 1