jquery clone vs parse

JavaScript performance comparison

Revision 2 of this test case created

Preparation code

<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<div id="logo-holder">
<div class="logo logo-animate- logo-gray">
    <div class="logo-row logo-row-1">
        <span class="logo-row-a">
            <span class="logo-left-cap logo-1"></span>
            <span class="logo-line logo-1"></span>
            <span class="logo-right-cap logo-1"></span>
            <span class="logo-left-cap logo-2"></span>
            <span class="logo-line logo-2"></span>
            <span class="logo-right-cap logo-2"></span>
            <span class="logo-left-cap logo-3"></span>
            <span class="logo-line logo-3"></span>
            <span class="logo-right-cap logo-3"></span>
        </span>
        <span class="logo-row-b">
            <span class="logo-left-cap logo-1"></span>
            <span class="logo-line logo-1"></span>
            <span class="logo-right-cap logo-1"></span>
            <span class="logo-left-cap logo-2"></span>
            <span class="logo-line logo-2"></span>
            <span class="logo-right-cap logo-2"></span>
            <span class="logo-left-cap logo-3"></span>
            <span class="logo-line logo-3"></span>
            <span class="logo-right-cap logo-3"></span>
        </span>
    </div>
    <div class="logo-row logo-row-2">
        <span class="logo-row-a">
            <span class="logo-left-cap logo-4"></span>
            <span class="logo-line logo-4"></span>
            <span class="logo-right-cap logo-4"></span>
            <span class="logo-left-cap logo-5"></span>
            <span class="logo-line logo-5"></span>
            <span class="logo-right-cap logo-5"></span>
            <span class="logo-left-cap logo-6"></span>
            <span class="logo-line logo-6"></span>
            <span class="logo-right-cap logo-6"></span>    
         </span>
         <span class="logo-row-b">
             <span class="logo-left-cap logo-4"></span>
            <span class="logo-line logo-4"></span>
            <span class="logo-right-cap logo-4"></span>
            <span class="logo-left-cap logo-5"></span>
            <span class="logo-line logo-5"></span>
            <span class="logo-right-cap logo-5"></span>
            <span class="logo-left-cap logo-6"></span>
            <span class="logo-line logo-6"></span>
            <span class="logo-right-cap logo-6"></span>  
        </span>
    </div>
    <div class="logo-row logo-row-3">
        <span class="logo-row-a">
            <span class="logo-left-cap logo-7"></span>
            <span class="logo-line logo-7"></span>
            <span class="logo-right-cap logo-7"></span>
            <span class="logo-left-cap logo-8"></span>
            <span class="logo-line logo-8"></span>
            <span class="logo-right-cap logo-8"></span>
            <span class="logo-left-cap logo-9"></span>
            <span class="logo-line logo-9"></span>
            <span class="logo-right-cap logo-9"></span>
        </span>
        <span class="logo-row-b">
            <span class="logo-left-cap logo-7"></span>
            <span class="logo-line logo-7"></span>
            <span class="logo-right-cap logo-7"></span>
            <span class="logo-left-cap logo-8"></span>
            <span class="logo-line logo-8"></span>
            <span class="logo-right-cap logo-8"></span>
            <span class="logo-left-cap logo-9"></span>
            <span class="logo-line logo-9"></span>
            <span class="logo-right-cap logo-9"></span>
        </span>
    </div>
    <div class="logo-row logo-row-4">
        <span class="logo-row-a">
            <span class="logo-left-cap logo-10"></span>
            <span class="logo-line logo-10"></span>
            <span class="logo-right-cap logo-10"></span>
            <span class="logo-left-cap logo-11"></span>
            <span class="logo-line logo-11"></span>
            <span class="logo-right-cap logo-11"></span>
            <span class="logo-left-cap logo-12"></span>
            <span class="logo-line logo-12"></span>
            <span class="logo-right-cap logo-12"></span>
        </span>
        <span class="logo-row-b">
            <span class="logo-left-cap logo-10"></span>
            <span class="logo-line logo-10"></span>
            <span class="logo-right-cap logo-10"></span>
            <span class="logo-left-cap logo-11"></span>
            <span class="logo-line logo-11"></span>
            <span class="logo-right-cap logo-11"></span>
            <span class="logo-left-cap logo-12"></span>
            <span class="logo-line logo-12"></span>
            <span class="logo-right-cap logo-12"></span>
        </span>
    </div>
    <div class="logo-row logo-row-5">
        <span class="logo-row-a">
            <span class="logo-left-cap logo-13"></span>
            <span class="logo-line logo-13"></span>
            <span class="logo-right-cap logo-13"></span>
            <span class="logo-left-cap logo-14"></span>
            <span class="logo-line logo-14"></span>
            <span class="logo-right-cap logo-14"></span>
        </span>
        <span class="logo-row-b">
            <span class="logo-left-cap logo-13"></span>
            <span class="logo-line logo-13"></span>
            <span class="logo-right-cap logo-13"></span>
            <span class="logo-left-cap logo-14"></span>
            <span class="logo-line logo-14"></span>
            <span class="logo-right-cap logo-14"></span>
        </span>
    </div>
</div>
</div>
<div id="mydiv"></div>
<script>
Benchmark.prototype.setup = function() {
    var asHtml = $('#logo-holder').html();
    var asJq = $('#logo-holder .logo');
    var asDom = asJq[0];
    var myDiv = $('#mydiv');
};

Benchmark.prototype.teardown = function() {
    myDiv.html('');
};
</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
parse
myDiv.append(asHtml);
pending…
clone
myDiv.append(asJq.clone());
pending…
native clone
myDiv.append(asDom.cloneNode(true));
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