Clone modification vs. dom modification

JavaScript performance comparison

Revision 2 of this test case created

Preparation code

<html>
<body>
<div id="content"><div class="post_all"></div></div>


<div id="templateArea">
<div class="post_all transform_translatez">
    <div class="avatar transform_translatez"></div>
    <div class="post">
        <div class="left-triangle"></div>
        <div class="header">
            <div class="name"></div>
            <div class="date"></div>
            <div class="sticker"></div>
        </div>
        <div class="text_wrapper"></div>
        <div class="media"></div>
        <div id="editPostPlaceholder" class="transform_translatez"></div>
        <div class="stats">
            <div class="stat"><span class="likes">0</span> <div class="icon_like" onclick="alert('List of likers')"/></div>
            <div class="stat"><span class="comment_count">0</span> <div class="icon_chat" onclick="alert('List of commentators')"/></div>
            <div class="stat"><span class="shares">0</span> <div class="icon_share" onclick="alert('List of sharers')"/></div>
        </div>
        <div class="actions">
            <div class="icon_excla" onclick="alert('Reported')"/>
            <div class="icon_edit" class="editPost"/>
            <div class="icon_delete" class="deletePost"/>
            <div class="icon_chatshare" class="chatShare"/>
            <div class="icon_share" onclick="alert('Shared')"/>
            <div class="icon_like" class="likePost"/>
        </div>
    </div>
    <div class="comment_btn_container">
        <div class="see_all_comments">See all</div>
        <div class="see_new_comments">See newest</div>
        <div class="loading_comments_top"></div>
    </div>
    <div class="comments"></div>
    <div class="loading_comments_bottom"></div>
    <div class="comment_btn_container">
        <div class="see_new_comments_with_scroll">See newest</div>
    </div>
    <div class="update_btn_container">
        <div class="update_btn">See new</div>
        <div class="loading_item_update"></div>
    </div>
    <div class="make_comment_area transform_translatez">
        <div class="avatar transform_translatez"></div>
        <div class="comment_box_wrapper">
            <div class="left-triangle"></div>
            <div class="comment_box"></div>
        </div>
    </div>
    <div class="clear"></div>
</div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</body>
</html>
<script>
  Benchmark.prototype.setup = function() {
    var $content = $("#content"),
        $templateArea = $("#templateArea"),
        $template = $templateArea.find(".post_all");
    
    var $clone = $template.clone();
    
    
  };
</script>

Preparation code output

0
0
See all
See newest
See newest
See new

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Dom Traversal
 
$template.find(".avatar").html("a").css('height','10px');
$template.find(".name").html("Aske");
$template.find(".date").html("now");
$template.find(".text_wrapper").html("Textytext");
$template.find(".media").html("<img src=''>");
$template.find(".likes").html("1");
$template.find(".comment_count").html("2");
$template.find(".shares").html("3");
$template.find(".comments").html("<div>comment</div>");
 pending…
Clone Traversal
 
$clone.find(".avatar").html("a").css('height','10px');
$clone.find(".name").html("Aske");
$clone.find(".date").html("now");
$clone.find(".text_wrapper").html("Textytext");
$clone.find(".media").html("<img src=''>");
$clone.find(".likes").html("1");
$clone.find(".comment_count").html("2");
$clone.find(".shares").html("3");
$clone.find(".comments").html("<div>comment</div>");

$template.replaceWith($clone);
 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