jQuery vs createElement

JavaScript performance comparison

Revision 201 of this test case created

Info

Benchmarks from answer on StackOverflow: http://stackoverflow.com/questions/268490/jquery-document-createelement-equivalent/268520

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://linkbroker.hu/stuff/jquery.create/jquery.create.js"></script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
document.createElement('div')
DIV = document.createElement("div");
DIV.className = "className";
DIV.textContent = "Text";
$(DIV);
pending…
$(document.createElement('div'))
var DIV = $(document.createElement("div")).addClass('className').text('Text')
pending…
$.create("div")
var DIV = $.create("div")
DIV.className = "className";
DIV.textContent = "Text";
pending…
$('<div></div>')
var DIV = $('<div></div>', {'class':'className','text':'Text'})
pending…
$('<div></div>')
var DIV = $('<div class="className">Text</div>')
pending…
$('<div></div>') Hard code
var DIV = $('</div>').addClass('className').text('Text')
pending…
$('<div>')
var DIV = $('<div>', {'class':'className','text':'Text'})
pending…
$('<div>')
var DIV = $('<div class="className">Text')
pending…
$('</div>')
var DIV = $('</div>', {'class':'className','text':'Text'})
pending…
$('<DIV>')
var DIV = $('<DIV>', {'class':'className','text':'Text'})
pending…
$('</DIV>')
var DIV = $('</DIV>', {'class':'className','text':'Text'})
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment