DOM vs innerHTML
JavaScript performance comparison
Revision 10 of this test case created by gonchuki
Info
Fine tuning the DOM method to yield better performance for this particular synthetic test. (alternate method without cloning)
Preparation code
<div id="main_node"></div>
<script>
var node = document.getElementById('main_node'),
fragment = document.createDocumentFragment();
</script>
Test runner
Warning! For accurate results, please disable Firebug before running the tests. (Why?)
Java applet disabled.
Testing in unknown unknown
| Test |
Ops/sec |
DOM |
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
node.appendChild(fragment);
node.innerHTML = '';
|
pending… |
innerHTML |
node.innerHTML = '<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>';
node.innerHTML = '';
|
pending… |
Compare results of other browsers
0 comments