many appends vs big html chunk

Benchmark created by Justin on

Description

If you don't do measurements, browsers will only reflow once, making it not that much more expensive to just append to the dom, especially if you have additional dom work to do.

Preparation HTML

<div id="container"></div>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
 
<script>
  var iterations = 1000;
  $('#container').empty();
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
html container
var html = [];
for (var i = 0; i < iterations; i++) {
 html.push('<div id="item-' + i + '">There is stuff here.</div>');
}
$('#container').html(html.join(''));
for (var i = 0; i < 100000; i++) {
 $('#item-' + i).click(function() {
  console.log('clicked!')
 });
}
ready
dom appends
var container = $('#container');
for (var i = 0; i < iterations; i++) {
 container.append('<div id="item-' + i + '">There is stuff here.</div>');
 $('#item-' + i).click(function() {
  console.log('clicked!')
 });
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.