document.createFragment vs jQuery element (v5)

Revision 5 of this benchmark created by Deryck on

Description

Which is faster to render the node to the DOM?

  1. Creating a document fragment and adding to the DOM OR
  2. Creating a jquery element and adding to the DOM

Preparation HTML

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

<div id='container' style="width: 0; height: 0;" />

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery Element
var div = $('<div>'),
  newDiv = $('<div>').html('Actually, the DOM is fast.');
div.append(newDiv);

$('#container').append(div);
ready
document fragment
var fragment = document.createDocumentFragment(),
  newDiv = document.createElement('div');
newDiv.innerHTML = 'Actually, the DOM is fast.';
fragment.appendChild(newDiv);
document.getElementById('container').appendChild(fragment);
ready

Revisions

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