jQuery vs createElement

JavaScript performance comparison

Revision 225 of this test case created

Preparation code

<script src="//code.jquery.com/jquery-git2.min.js"></script>

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
test1
$('<div id="my-id" class="my-class">')
pending…
test2
$('<div id="my-id" class="my-class"></div>')
pending…
test3
var d=document.createElement('div');
d.id='my-id';
d.className='my-class';
$(d);
pending…
test4
$(document.createElement('div')).attr('id','my-id').attr('class','my-class');
pending…
test5
$(document.createElement('div')).prop('id','my-id').prop('class','my-class');
pending…
test6
$(document.createElement('div')).prop({'id':'my-id', 'class': 'my-class'});
pending…
test7
$('<div>').prop('id','my-id').prop('class','my-class');
pending…
test8
$('<div>',{'id':'my-id','class':'my-class'})
pending…
n1
$('<div class="entry" id="new_entry" title="Add New"><div><span class="foundicon-plus"></span></div></div>')
pending…
n2
$('<div>').prop({"class": "entry", "id": "new_entry", "title": "Add New"}).append(
  $('<div>').append(
    $('<div>').prop("class", "entry")
  )
)
pending…
n3
$('<div>').prop({"class": "entry", "id": "new_entry", "title": "Add New", "innerHTML": '<div><span class="foundicon-plus"></span></div>'})
pending…
n4
$(document.createElement("div")).prop({"class": "entry", "id": "new_entry", "title": "Add New", "innerHTML": '<div><span class="foundicon-plus"></span></div>'})
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