提高 jQuery 模板性能

Update

显然，jQuery 模板可以被编译，并且它有助于提高模板的性能if 语句 shown here http://jsperf.com/complex-template-vs-concat/4.

但如图所示here http://jsperf.com/jquery-template-table-performance/5，预编译的 jQuery 模板对我的情况没有多大作用，因为我的模板不包含逻辑块。

对于那些建议使用其他模板引擎的人，理想情况下我只想使用 jQuery 模板，因为团队中的每个人都知道 jQuery。还有this http://jsperf.com/dom-vs-innerhtml-based-templating/42比较几个模板引擎的测试用例。

Hi,

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

为了进行比较，我使用了 jQuery 模板和良好的旧字符串附加方法来将行添加到表中。结果可见here http://jsperf.com/jquery-template-table-performance。与字符串附加方法相比，使用 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>

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>

执行：

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

Thanks,

Chi

陈志,

这条路有点晚了。我发现首先编译模板，然后通过字符串 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 http://boedesign.com/misc/presentation-jquery-tmpl/#13

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