add HTML jQuery v Using CreateDocumentFragment (v13)

Revision 13 of this benchmark created 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>

Setup

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

Test runner

Ready to run.

Testing in
TestOps/sec
Using $([markup]
$("<div><h1>Hello World</h1></div>").appendTo("body");
ready
CreateDocumentFragment
document.body.appendChild(
create("<div><h1>Hello World</h1></div>"));
ready
blah
$("<div/>").append(
  $("<h1/>").text('Hello World')
)


.appendTo("body");
ready

Revisions

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