jQuery Template Plugin Vs Native DOM Elm Creation (v2)

Revision 2 of this benchmark created on

Description

A Speed test to check the difference in render time when using a) jQuery Template Plugin - http://api.jquery.com/jQuery.template/ b) Native javascript DOM element creation

to loop through an array of objects and render the output.

I like the template binding flexibly that the Template plugin gives but as you can see it's much much slower than native DOM element creation and binding. So good for website use, but probably not so good for low end browser engines like those used in STB and mobile (which is why I needed it for)

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>

<div style="width:400px; height:500px; overflow:scroll; color:gray;">
<ul id="movieList_template"></ul>
</div>
<div style="width:400px; height:500px; overflow:scroll; color:green;">
<ul id="movieList_native"></ul>
</div>
<div style="width:400px; height:500px; overflow:scroll; color:blue;">
<ul id="movieList_Fragment"></ul>
</div>
<div style="width:400px; height:500px; overflow:scroll; color:red;">
<ul id="movieList_InnerHTML"></ul>
</div>
<script id="movieTemplate" type="text/x-jquery-tmpl">
    <li><b>${Name}</b> (${ReleaseYear})</li>
</script>
<script>
      var movies = [
          { Name: "The Red Violin", ReleaseYear1: "1998" },
          { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
          { Name: "The Red Violin", ReleaseYear: "1998" },
          { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
          { Name: "The Red Violin", ReleaseYear: "1998" },
          { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
          { Name: "The Red Violin", ReleaseYear: "1998" },
          { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
          { Name: "The Red Violin", ReleaseYear: "1998" },
          { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
          { Name: "The Red Violin", ReleaseYear: "1998" },
          { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
          { Name: "The Red Violin", ReleaseYear: "1998" },
          { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
          { Name: "The Red Violin", ReleaseYear: "1998" },
          { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
          { Name: "The Inheritance", ReleaseYear: "1976" }
      ];
  
   function renderjQueryTemplateSpeedTest(){
    // Render the template with the movies data and insert
          // the rendered HTML under the "movieList" element
          $( "#movieTemplate" ).tmpl( movies ).appendTo( "#movieList_template" );
  
      }
  
  function renderNativeSpeedTest(){
  var holder = document.getElementById("movieList_native");
  
          for (var i=0; i < movies.length; i++)
          {
              var listItem = document.createElement("li");
              var boldItem = document.createElement("b");
              listItem.textContent = " " + movies[i].ReleaseYear;
              boldItem.textContent = " " + movies[i].Name;
              listItem.appendChild(boldItem);
              holder.appendChild(listItem);
          }
  }
  
  function renderFragmentSpeedTest(){
  var holder = document.getElementById("movieList_Fragment");
  var fr = document.createDocumentFragment();
          for (var i=0; i < movies.length; i++)
          {
              var listItem = document.createElement("li");
              var boldItem = document.createElement("b");
              listItem.textContent = " " + movies[i].ReleaseYear;
              boldItem.textContent = " " + movies[i].Name;
              listItem.appendChild(boldItem);
              fr.appendChild(listItem);
          }
  holder.appendChild(fr);
  }
  
  function renderInnerHTMLSpeedTest(){
  var holder = document.getElementById("movieList_InnerHTML");
  var html = '';
          for (var i=0; i < movies.length; i++)
          {
                html += '<li><b>' + movies[i].Name + '</b> (' + movies[i].ReleaseYear + ')</li>';
          }
              holder.innerHTML = html;
              html = null;
  }
  
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery Template Test
renderjQueryTemplateSpeedTest();
ready
Native DOM Elm Creation
renderNativeSpeedTest();
ready
InnerHTML
renderInnerHTMLSpeedTest();
ready
Fragment
renderFragmentSpeedTest();
ready

Revisions

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