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

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

Revision 2 of this benchmark created by Paulius on September 8, 2015

Description

Comparing native innerHTML() with a couple jQuery alternatives.

Preparation HTML

<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>

Setup

var $el = $('#testbed'),
        el = $el[0];

Test runner

Ready to run.

Test Ops/sec

innerHTML

Testing in
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>';	ready
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>');	ready
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>');	ready

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>';

ready

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>');

ready

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>');

ready

Revisions

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

Revision 1: published by Tom Doan on May 5, 2015
Revision 2: published by Paulius on September 8, 2015