add HTML jQuery v Using CreateDocumentFragment (v10)

Revision 10 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]
$('<img alt="" style="width: 20%; height: 20%; display:inline;" src="/images/loading.gif>').appendTo("body");
ready
CreateDocumentFragment
var docfrag = document.createDocumentFragment();
var imgElement = document.createElement("img");
imgElement.style.width = "20%";
imgElement.style.height = "20%";
imgElement.style.display = "inline";
imgElement.src = "/images/loading.gif"

docfrag.appendChild(imgElement);

document.body.appendChild(docfrag);
ready

Revisions

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