jQuery vs createElement (v282)

Revision 282 of this benchmark created on

Description

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

Preparation HTML

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

Test runner

Ready to run.

Testing in
TestOps/sec
$('<div>', {...})
$('<div>', {
    'class': 'atg-items',
    css: {
        display: 'none',
        position: 'fixed',
        zIndex: 1000000009,
        minWidth: 10,
        maxHeight: 250,
        overflow: 'auto'
    }
});
ready
$('<div/>', {...})
$('<div/>', {
    'class': 'atg-items',
    css: {
        display: 'none',
        position: 'fixed',
        zIndex: 1000000009,
        minWidth: 10,
        maxHeight: 250,
        overflow: 'auto'
    }
});
ready
document.createElement
$(document.createElement('div'))
  .attr('class', 'atg-items')
  .css({
    display: 'none',
    position: 'fixed',
    zIndex: 1000000009,
    minWidth: 10,
    maxHeight: 250,
    overflow: 'auto'
});
ready
document.createElement .attr
$(document.createElement("div")).attr({
  "class": "atg-items",
  "style": "display: none; position: fixed; z-index: 1000000009; min-width: 10px; max-height: 250px; overflow: auto;"
})
ready
document.createElement .attr addClass
$(document.createElement("div"))
  .addClass("atg-items")
  .attr("style", "display: none; position: fixed; z-index: 1000000009; min-width: 10px; max-height: 250px; overflow: auto;")
ready
document.createElement addClass .css
$(document.createElement('div'))
  .addClass("atg-items")
  .css({
    display: 'none',
    position: 'fixed',
    zIndex: 1000000009,
    minWidth: 10,
    maxHeight: 250,
    overflow: 'auto'
});
ready

Revisions

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