Lazycoder

Benchmarking a simple DOM based cloning template

Sara Chipps recently posted a simple DOM based clone template method she uses in one of her apps. "Easy HTML Templating with JQuery"

My template looks like this:

  <script id="ItemTemplate" type="text/html"
        <li class="item" value="|rowNumber|">
              <input type=”text” id=”input|rowNumber|” />
        </li>
    </script>

Now within my code I need to put a place holder where I want my HTML to go. I have my unordered list called url_list.

<ul id="url_list"></ul>

Now, you see that most of my items look like this “|rowNumber|” I have a variable in my code called nextUniqueItemID (I believe in extremely descriptive variable names). Here is my “addItem” function.

function addItem() {
        var list = $('#url_list'),
                      items = list.find('li');
        list.append($('#ItemTemplate’)
                                    .html().replace(/\|rowNumber\|/gi, nextUniqueItemID++))
    }

The use of global variables aside (cough,cough),I looked at it and, having used something like this myself, thought that it would work find for data sets containing a very small number of items. The problem is these kinds of clone based templates are VERY slow compared to the templating engines that are available for various JavaScript libraries.

I happened to read a post by Brian Landau called "Benchmarking Javascript Templating Libraries" this morning and wondered just HOW MUCH slower is the naive template method than a good template library?

I grabbed the benchmarking code and modified it to run the new clone based template method.

	var nextUniqueItemID = 0;
	function addItem() {
        var list = $('#url_list'),
        items = list.find('li');
        list.append($('#ItemTemplate').html().replace(/\|rowNumber\|/gi, nextUniqueItemID++));
    };
	
    $(document).ready(function(){
	    var output = $('#output');
	    $.benchmarks = {};
	
      $.benchmarks.test_simple = function(){
        addItem();
      };
      
      $.benchmarks.loop_test = function(){
        for (var i=0; i < 5; i++){
          addItem();
        }
      };

      // use these lines to run the benchmark tests in your browsers JS console
      // $.benchmark(1000, '#simple_test', $.benchmarks.test_simple);
      // $.benchmark(1000, '#loop_test', $.benchmarks.loop_test);
    });

Since the template Sara provided contains an input tag you get a different benchmark if you run the simple_test and the loop_test separately after refreshing your browser. You can run the tests for yourself here, the loop test *may* cause your browser to give you a "script is running slow" message, hit continue as the loop will eventually end. You may also get different numbers if you run the tests in IE, Chrome, and Safari.

results: using FF 3.5.5
Simple Test: 1.71s
Loop test: 31.534s

When you consider that the slowest loop test using a template library was just around 4.5s, you get a better idea of just how slow this method is when you have an input in your template.

So that's fine, but it's known that dynamically adding text inputs is slow in just about every browser and the original tests don't use inputs at all, just divs. So let's modify the template and see what the results are.

<script id="ItemTemplate" type="text/html">
<div class="test"><h2>This is a test of |name|</h2><p>The homepage is <a href="|url|">|url|</a>.</p><p>The sources is: |source|</p></div>
</script>

I modified the addItem function to account for the new data. n.b. The data I'm using is static, if you wanted to use a data source you would just modify this method to take in your data parameters.

	function addItem() {
        var list = $('#url_list'),
        items = list.find('li');
        list.append($('#ItemTemplate').html()
			.replace(/\|name\|/gi, "Clone template method")
			.replace(/\|source\|/gi, "http://girldeveloper.com/waxing-dev/easy-html-templating-with-jquery/")
			.replace(/\|url\|/gi, "http://girldeveloper.com/waxing-dev/easy-html-templating-with-jquery/"));
    };

results using FF 3.5.5 - refresh between each test
simple test: 1.285s
loop test: 3.771

results using ff 3.5.5 with no refresh between tests
simple test: 1.434
loop test: 4.227

So that's looking a little bit better. Not too much slower than the template libraries.

So what do the template libraries give you? Well the replace method works find provides your data is escaped properly. But say instead of a url in the "source" replacement, you use a file path like "file:\\foodrive\source.txt". Well it still gets replaced, but the text looks like this "file:\foodrivesource.txt". So in addition to the replacement, you have to make sure your data is properly escaped. A lot of template libraries will do this for you. Also notice that the addItem method has to do a DOM lookup on every iteration of the loop to get the template. If you have a large DOM, this could impact the performance.