jQuery performance versus DOM performance

Benchmark created on

Description

A myth about jQuery performance versus DOM performance: creating elements. When creating element nodes, DOM methods are faster than jQuery methods.

Inspired in: http://gabrieleromanato.name/a-myth-about-jquery-performance-versus-dom-performance-creating-elements/

Preparation HTML

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

<div id="output"></div>

Setup

var output = document.querySelector('#output');

Teardown


    document.querySelector('#output').innerHTML = '';

Test runner

Ready to run.

Testing in
TestOps/sec
Native DOM management
var e = document.createElement('div');
var t = document.createTextNode('Test');
e.appendChild(t);
output.appendChild(e);
ready
jQuery DOM management
var e = $('<div/>');
e.text('Test').appendTo('#output');
ready

Revisions

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