innerHTML vs. html() vs. empty().append()

JavaScript performance comparison

Revision 2 of this test case created by Paulius

Preparation code

<div id="testbed">
  <h2><em>Test corpus will be inserted here dynamically.</em></h2>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
      
<script>
Benchmark.prototype.setup = function() {
  var $el = $('#testbed'),
      el = $el[0];

};
</script>

Preparation code output

<div id="testbed"> <h2><em>Test corpus will be inserted here dynamically.</em></h2> </div>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
innerHTML
el.innerHTML = '<div class="overlay overlay--fully-visible"> <img class="overlay__icon" src="XXX" alt="XXX logo blue" /> <div class="overlay__content"> <h1 class="overlay__heading">GMV</h1> <h2 class="overlay__subheading u-margin-bottom-x-big u-padding-bottom-x-big">Gross Merchandise Volume, €; Marketplace turnover</h2> <div class="grid grid--nowrap two-thirds push--one-sixth u-margin-top-x-big item item--metric"> <div class="grid__item one-half"> <h3 class="item__title"> XXX<span class="item__subdescription">mln</span> </h3> <span class="overlay__subheading">XXX</span> </div> <div class="grid__item one-half"> <h3 class="item__title"> XXX<span class="item__subdescription">mln</span> <sup class="item__description is-active">XXX</sup> </h3> <span class="overlay__subheading"> XXX </span> </div> </div> </div> </div>';
pending…
html()
$el.html('<div class="overlay overlay--fully-visible"> <img class="overlay__icon" src="XXX" alt="XXX logo blue" /> <div class="overlay__content"> <h1 class="overlay__heading">GMV</h1> <h2 class="overlay__subheading u-margin-bottom-x-big u-padding-bottom-x-big">Gross Merchandise Volume, €; Marketplace turnover</h2> <div class="grid grid--nowrap two-thirds push--one-sixth u-margin-top-x-big item item--metric"> <div class="grid__item one-half"> <h3 class="item__title"> XXX<span class="item__subdescription">mln</span> </h3> <span class="overlay__subheading">XXX</span> </div> <div class="grid__item one-half"> <h3 class="item__title"> XXX<span class="item__subdescription">mln</span> <sup class="item__description is-active">XXX</sup> </h3> <span class="overlay__subheading"> XXX </span> </div> </div> </div> </div>');
pending…
empty().append()
$el.empty().append('<div class="overlay overlay--fully-visible"> <img class="overlay__icon" src="XXX" alt="XXX logo blue" /> <div class="overlay__content"> <h1 class="overlay__heading">GMV</h1> <h2 class="overlay__subheading u-margin-bottom-x-big u-padding-bottom-x-big">Gross Merchandise Volume, €; Marketplace turnover</h2> <div class="grid grid--nowrap two-thirds push--one-sixth u-margin-top-x-big item item--metric"> <div class="grid__item one-half"> <h3 class="item__title"> XXX<span class="item__subdescription">mln</span> </h3> <span class="overlay__subheading">XXX</span> </div> <div class="grid__item one-half"> <h3 class="item__title"> XXX<span class="item__subdescription">mln</span> <sup class="item__description is-active">XXX</sup> </h3> <span class="overlay__subheading"> XXX </span> </div> </div> </div> </div>');
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.

0 Comments

Test corpus will be inserted here dynamically.