.empty.append vs .html

JavaScript performance comparison

Test case created

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="test'></div>
<script>
  Benchmark.prototype.setup = function() {
    var iterations = 100;
  };
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
.empty.append - uncached
 
for (var i = 0; i < iterations; i++) {
  var html = '<div>whatever</div>';
  $('#test').empty().append(html);
}
 pending…
.html - uncached
 
for (var i = 0; i < iterations; i++) {
  var html = '<div>whatever</div>';
  $('#test').html(html);
}
 pending…
.empty.append - cached
 
var $body = $('#test');
for (var i = 0; i < iterations; i++) {
  var html = '<div>whatever</div>';
  $body.empty().append(html);
}
 pending…
.html - uncached
 
var $body = $('#test');
for (var i = 0; i < iterations; i++) {
  var html = '<div>whatever</div>';
  $body.html(html);
}
 pending…

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

Compare results of other browsers

0 comments

Add a comment