add HTML jQuery v Using CreateDocumentFragment (v19)

Revision 19 of this benchmark created by jonas on

Description

want to see the speed difference when adding markup to the DOM using jQuery v just doing using the CreateDocumentFragment API method.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


<div id="view"></div>

Setup

function create(htmlStr) {
      var frag = document.createDocumentFragment(),
          temp = document.createElement('div');
      temp.innerHTML = htmlStr;
      while (temp.firstChild) {
        frag.appendChild(temp.firstChild);
      }
      return frag;
    }
    
    $el = $("#view");

Test runner

Ready to run.

Testing in
TestOps/sec
Using $([markup]
$el.html($("<div><h1>Hello World</h1></div>"));
ready
CreateDocumentFragment
while ($el[0].firstChild) {
  $el[0].removeChild($el[0].firstChild);
}

$el[0].appendChild(
create("<div><h1>Hello World</h1></div>"));
ready
raw innerhtml
while ($el[0].firstChild) {
  $el[0].removeChild($el[0].firstChild);
}

$el[0].innerHTML = "<div><h1>Hello World</h1></div>";
ready

Revisions

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