Clone modification vs. dom modification

JavaScript performance comparison

Test case created by Aske

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="https://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");

};
</script>

Preparation code output

<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> </body> </html>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
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
var $clone = $template.clone();

$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.

0 Comments

0
0
See all
See newest
See newest
See new