jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.
jsperf.com URLs are mirrored at the same path, e.g:
https://jsperf.com/negative-modulo/2
Can be accessed at:
https://jsperf.app/negative-modulo/2
Trying to reduce DOM reflow while inserting nodes.
NOTE: I've tried to keep the inner loop the same in all the test, since i want to know the impact of the last append command. I DO NOT WANT to optimize the inner loop. The jQuery wrapper is called on purpose.
The idea is to see what is the fastest way to do the bulk insertion of nodes.
jQuery seems to be using documentFragment when an array is given (http://www.bennadel.com/blog/2281-jquery-appends-multiple-elements-using-efficient-document-fragments.htm)
Still there is some diferences with pure js or inserting the document fragment directly.
<div id='wrapper'>
<div id="test-area" style="height: 75px; width: auto; overflow:scroll"></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
var inner_loop_size = 1000
$('#test-area').empty();
Ready to run.
Test | Ops/sec | |
---|---|---|
append items one by one ( BAD ) |
| ready |
jquery.append array of jquery wrapped nodes |
| ready |
jquery.append array of elements |
| ready |
jquery.append documentFragment |
| ready |
raw javascript |
| ready |
.detach |
| ready |
.repalceWith |
| ready |
jquery string append from test #3 |
| ready |
insertAdjacentHTML string |
| ready |
insertAdjacentHTML2 |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.