dom append or dom-fragment append (v2)

Revision 2 of this benchmark created by Maher Salam on


Description

Testing/profiling the code patterns from the Script Junkie article "(pre)Maturely Optimize Your JavaScript"

http://msdn.microsoft.com/en-us/scriptjunkie/gg622887.aspx

Snippet comparison #7

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  var list_count = 0,
      the_list = [];
  
  for (var i = 0; i < 75; i++) {
   the_list[i] = Math.random();
  }
  
  
  function makeUL_1(list) {
   $("<ul></ul>").attr({
    "id": "my_list" + list_count
   }).appendTo("body");
  
   for (var i = 0; i < list.length; i++) {
    $("<li></li>").text(list[i]).appendTo("#my_list" + list_count);
   }
   $("#my_list" + list_count).hide();
   list_count++;
  }
  
  function makeUL_2(list) {
   var $ul = $("<ul></ul>").attr({
    "id": "my_list" + list_count
   });
  
   for (var i = 0; i < list.length; i++) {
    $("<li></li>").text(list[i]).appendTo($ul);
   }
   $ul.appendTo("body");
   $ul.hide();
   list_count++;
  }
  
  function makeUL_3(list) {
   var $ul = $("<ul></ul>").attr({
    "id": "my_list" + list_count
   }),
       html = [];
  
   for (var i = 0, length = list.length; i < length; i++) {
    html.push('<li>' + list[i] + '</li>');
   }
  
   $ul.html(html.join('\n')).appendTo("body");
   $ul.hide();
   list_count++;
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
dom append
makeUL_1(the_list);
ready
dom-fragment append
makeUL_2(the_list);
ready
Using raw html to create lists
makeUL_3(the_list);
ready

Revisions

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

  • Revision 1: published by Kyle Simpson on
  • Revision 2: published by Maher Salam on