Improve jQuery template performance

Question

Update

Apparently, jQuery templates can be compiled and it helps performance for templates with if statements shown here.

But as shown here, the precompiled jQuery templates doesn't do much for my case since my template contains no logic block.

For those who are suggesting the use of another templating engine, ideally I would like to use just jQuery templates as everyone on the team knows just jQuery. There is also this test case that compares a few templating engine.

---

Hi,

Just today I was told that there are performance issues with using jQuery templates.

To compare, I have used jQuery templates and the good old string append method to add rows to a table. The results can be seen here. Using jQuery templates is about 65% slower compare to string append method, Ouch!

I am wondering what can be done to improve the performance of the jQuery template script.

The full script can be viewed in the link provided. But the basic idea is as follows:

Template:

<script type="x-jquery-tmpl" id="tmplRow">
<tr>
    <td><input type="checkbox" value="${id}" /></td>
    <td>${firstName} ${lastName}</td>
    <td class="edit">
        <a>Edit</a>
        <input style="display:none;" type="hidden" value="Blah" />
        <input class="cancel" type="button" value="cancel" />
    </td>
    <td class="select">
        <a>Select</a>
        <select style="display:none;">
            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
        </select>
        <input class="cancel" type="button" value="cancel" />
    </td>
    <td>More string</td>
    <td>More string</td>
    <td>More string</td>
    <td>More string</td>
    <td>More string</td>
    <td>More string</td>
</tr>
</script>

Data:

<script type="text/javascript">
    var data = [];

    for (var i = 0; i < 100; i++) {
        var row = {
            id: i,
            firstName: 'john',
            lastName: 'doe'
        };

        data.push(row);
    }
</script>

HTML:

<table id="table"></table>

Executes:

<script type="text/javascript">
$('#tmplRow').tmpl(data).appendTo('#table');
</script>

Thanks,

Chi

Answer 1

Chi Chan,

a bit late on the trail with this one. I've discovered that compiling the templates first and then referencing them by a string Id (in the case below, the named variable templateAlias ) is actually 10 times faster than going via the object route. Here's how you'd achieve that (based on your code sample):

var templateAlias = 'tmplRow';
// compile the template
$.template(templateAlias, $("#tmplRow"));

<script type="text/javascript">
    $.tmpl(templateAlias, data).appendTo('#table');
</script>

this should significantly speed up procedings as the template will have been compiled and won't be using the entire object model everytime you run the .appendTo() function. Using $('#tmplRow').tmpl(data).appendTo('#table'); means that $('#tmplRow') queries the DOM, whereas, $.tmpl(templateAlias, data).appendTo('#table'); only adds to the DOM based on the reference to the template. there's quite a bit of reading on the subject.

Here's a link that may help:

http://boedesign.com/misc/presentation-jquery-tmpl/#13

hope this helps, Good luck...

Answer 2

This seems to be the fastest engine right now: http://documentcloud.github.com/underscore/

You can find a benchmarking test suite here that compares all different templating frameworks currently available: https://github.com/aefxx/jQote2 [download and run jqote.benchmark.htm].

I do believe that jQuery templates are in their infancy and performance will improve in subsequent iterations.

Answer 3

It depends a lot on the browser that does the rendering. IE6 can be fairly slow (though transferring 1,000 large rows of HTML markup and injecting that into the document is not going to be fast either).

Here's a jsperf benchmark that generates 1,000 rows of 10 columns and renders it. I'm averaging 200-250ms to render the 1,000 rows in Chrome 9.

The more important question should really be: Why in the world are you displaying 1,000 rows at once? There are always better UX alternatives than that.

Answer 4

Your template is really simple, you might want to take a look at handlebars.js which is a templating language which has the option to precompile the templates.

It is made by rails and jquery core member Yehuda Katz.

Answer 5

Nobody mentioned mustache. In the late 2011 mustache had the best performance from popular templating frameworks.

http://mustache.github.com/