Improve jQuery template performance

Question

Update

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

But a

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/