DOM operations performance: Element attached vs elemen untattached to DOM

JavaScript performance comparison

Test case created by Cezary Daniel Nowak

Preparation code

<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
 
<script>
Benchmark.prototype.teardown = function() {
    $('div[id=someDIV]').remove();
};
</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
element not attached
$('<div></div>')
.css('z-index','999')
.attr('class', 'test')
.attr('id', 'someDIV')
.attr('tabindex', '-1')
.appendTo(document.body);
pending…
Element attached
$('<div></div>')
.appendTo(document.body)
.css('z-index','999')
.attr('class', 'test')
.attr('id', 'someDIV')
.attr('tabindex', '-1');
 
pending…
All in one line
$('<div style="z-index:999" class="test" id="someDIV" tabindex="-1"></div>')
.appendTo(document.body);
pending…

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

Compare results of other browsers

1 comment

asdfg commented :

asdfasdf

Add a comment