改善jQuery模板的性能 [英] Improve jQuery template performance

问题描述

更新

很明显，可以编译jQuery模板，并使用 if语句显示此处.

但是如此处所示，预编译的jQuery模板并没有做什么就我而言，因为我的模板不包含逻辑块.

对于那些建议使用其他模板引擎的人，理想情况下，我只想使用jQuery模板，因为团队中的每个人都只知道jQuery.还有此测试用例，它比较了一些模板引擎. >

---

就在今天，我被告知使用jQuery模板存在性能问题.

为了进行比较，我使用了jQuery模板和很好的旧字符串append方法将行添加到表中.可以在此处看到结果.与字符串追加方法相比，使用jQuery模板要慢大约65％！

我想知道如何改善jQuery模板脚本的性能.

可以在提供的链接中查看完整脚本.但基本思路如下:

模板:

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

数据:

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

执行:

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

谢谢

Chi

解决方案

Chi Chan，

在这条路上落后了一些.我发现先编译模板，然后通过字符串ID(在以下情况下，命名变量templateAlias)对其进行引用实际上比通过对象路由要快10倍.这是您要实现的方式(基于代码示例):

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

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

这将大大加快处理速度，因为模板将被编译，并且每次运行.appendTo()函数时都不会使用整个对象模型.使用$('#tmplRow').tmpl(data).appendTo('#table');表示$('#tmplRow')查询DOM，而$.tmpl(templateAlias, data).appendTo('#table');仅基于对模板的引用添加到DOM.有很多关于这个主题的阅读.

以下链接可能会有所帮助:

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

希望这会有所帮助，祝您好运...

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

解决方案

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

这篇关于改善jQuery模板的性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！