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

Bruise

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

Dotterel

Hi Jim! Thanks for your input :) Your presentation is awesome. I am still very bothered by the compiled template thing. I don't know what it does in the background but it seems that a compiled template would only make a difference if there are conditional blocks in the template. I wrote a test for that, take a look at the "Update" block in the question. Weird huh? – Bruise

Chi - try 'plugging' my code above into your test as a 2nd update and see what the difference is. i reckon the numbers will come down by a good 60-70%... – Dotterel

I think your performance test is flawed. Maybe it won't make a difference, but I'd run the second "$.tmpl" statement once without measuring and then run it 1000 times to see how fast it is. The method may be doing some optimization behind the scenes the first time its run. At least I would sure hope so. In short, your second 1000 runs includes any possible optimization that is being done on run #1. – Liew

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.

Forethoughtful

I think this is the closest answer... basically, wait for jQuery template to improve on performance down the road. For now, I will try not to over depend on it. – Bruise

and if you do need to get killer speed, use underscore. it's closer to native javascript. of course, you do have to change/tweak your jQuery templates a bit (more if you use loops/conditional logic and other complex stuff). good thing is, despite lack of elaborate documentation, you still can manage all that and in some cases, easier than jQuery way. – Forethoughtful

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.

Skylab

We are not trying to do 1000 rows, but rather, 100 rows. 100 rows isn't that bad :). I want to test quickly the performance of templating because we are looking at building an interactive grid where each <td> displays different result depending on the data. There will be a lot of more templating logic then just appending rows of course. The test written is just a way to see if performance could be an issue down the road. – Bruise

I created a new test building RAW HTML and the speeds I get seems to be faster than jQuery template. jsperf.com/jquery-templates-performance/4 - jQuery template (1.2sec), Raw HTML (0.2 sec) ! Massive difference – Gizzard

If you're going to copy/paste someone else's answer, at least give them credit. #4591218 – Sickener

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.

Honoria

I don't mind to check out handlebars. But their download doesn't work. if I reference just "handlebars.js" from source, it will fail with undefined method "required". Do you have a copy of the js file sitting around? – Bruise

Apparently 'compiling' templates only helps if there is logic control blocks. Please check the updated question for details. – Bruise

Answer 5

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

http://mustache.github.com/

Ina