12

更新

显然，可以编译 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>

谢谢，

志

4

5 回答 5

5

志灿，

这个有点晚了。我发现首先编译模板然后通过字符串 Id 引用它们（在下面的例子中，命名变量templateAlias）实际上比通过对象路由快 10 倍。以下是您实现这一目标的方法（基于您的代码示例）：

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

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

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

这是一个可能有帮助的链接：

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

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

于 2011-01-28T17:08:59.913 回答
4

这似乎是目前最快的引擎：http ://documentcloud.github.com/underscore/

您可以在此处找到一个基准测试套件，它比较了当前可用的所有不同模板框架：https ://github.com/aefxx/jQote2 [下载并运行 jqote.benchmark.htm]。

我确实相信 jQuery 模板还处于起步阶段，在后续迭代中性能会有所提高。

于 2011-01-07T21:22:56.717 回答
1

这在很大程度上取决于进行渲染的浏览器。IE6 可能相当慢（尽管传输 1,000 大行 HTML 标记并将其注入文档也不会很快）。

这是一个jsperf 基准测试，它生成 1,000 行，每列 10 列并呈现它。我平均需要 200-250 毫秒来渲染Chrome 9 中的 1,000 行。

更重要的问题应该是：到底为什么要一次显示 1,000 行？总有比这更好的用户体验替代品。

于 2011-01-09T13:19:57.210 回答
0

没有人提到胡子。在 2011 年末，mustache 在流行的模板框架中表现最好。

http://mustache.github.com/

于 2012-01-15T12:29:34.900 回答
0

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

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

于 2011-01-06T00:19:54.677 回答