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