childnodes-vs-getElementsByTagName
JavaScript performance comparison
Preparation code
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="div">
<div>
<div>
<ul>
<li>
</li>
</ul>
</div>
</div>
</div>
<script>
Benchmark.prototype.setup = function() {
var div = document.getElementById("div");
function enumerate1(node) {
var childNodes = node.childNodes;
for (var i = 0, l = childNodes.length; i < l; i++) {
if (childNodes[i].nodeType == 1) {
enumerate1(childNodes[i]);
}
}
}
function enumerate2(node) {
var childNodes = node.getElementsByTagName("*");
for (var i = 0; i < childNodes.length; i++) {}
}
function enumerate3(node) {
var childNodes = node.children;
for (var i = 0, l = childNodes.length; i < l; i++) {
enumerate3(childNodes[i]);
}
}
function enumerate4(node) {
for (node = node.firstChild; node; node = node.nextSibling) {
if (node.nodeType == 1) {
enumerate4(node);
}
}
}
function enumerate5(node) {
var childNodes= node.querySelectorAll("*");
for (var i = 0, l = childNodes.length; i < l; i++) {}
}
function enumerate6(node) {
$(node).find("*").each(function() {});
}
};
</script>
Preparation code output
Test runner
Warning! For accurate results, please disable Firebug before running the tests. (Why?)
Java applet disabled.
| Test | Ops/sec | |
|---|---|---|
childNodes |
|
pending… |
getElementsByTagName |
|
pending… |
children |
|
pending… |
firstChild |
|
pending… |
querySelectorAll |
|
pending… |
jquery |
|
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
- Revision 2: published
- Revision 3: published
- Revision 4: published by vamp
- Revision 9: published
- Revision 10: published
- Revision 11: published
0 comments