documentFragment appendChild vs jquery append / moved creation out of loop (v38)

Revision 38 of this benchmark created on

Description

Moved the DOM creation and selection out of the loop.

Preparation HTML

<div id="test-area" style="height: 75px; width: auto; overflow:scroll">
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Setup

var raw_fragment = document.createDocumentFragment()
    , jq_fragment1 = $('<div/>')
    , jq_fragment2 = $(document.createDocumentFragment())
    , raw_p = document.createElement("p")
    , jq_p = $('<p/>')
    , raw_test_area = document.getElementById('test-area')
    , jq_test_area = $('#test-area')
    , p
    ;

Teardown


    $('#test-area').empty();

Test runner

Ready to run.

Testing in
TestOps/sec
raw javascript
p = raw_p.cloneNode();
raw_fragment.appendChild(p);
//raw_test_area.appendChild(raw_fragment);
ready
jquery
p = jq_p.clone();
jq_fragment1.append(p);
//jq_test_area.append(jq_fragment1);
ready
jQuery wrapping documentFragment
p = jq_p.clone();
jq_fragment2.append(p);
//jq_test_area.append(jq_fragment2);
ready

Revisions

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