改善jQuery模板性能

Question

更新

显然,可以编译jQuery模板,它有助于使用此处显示的if语句来执行模板的性能.

但是,如图所示这里,预编译的jQuery的模板不适合我的情况,因为我的模板不包含逻辑块做多.

对于那些建议使用另一个模板引擎的人来说,理想情况下我只想使用jQuery模板,因为团队中的每个人都只知道jQuery.还有这是比较了几个模板引擎测试用例.

---

嗨,

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

为了比较,我使用了jQuery模板和旧的字符串追加方法来向表中添加行.结果可以在这里看到.使用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>

谢谢,

驰

Answer 1

陈志

跟这个有点晚了.我发现,第一编译模板,然后由一个字符串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

希望这有帮助,祝你好运...

Answer 2

您的模板非常简单，您可能想看看handlebars.js，它是一种模板语言，可以选择预编译模板。

它是由rails和jquery核心成员Yehuda Katz制作的。