提高 jQuery 模板性能

Posted 2023-02-24

【中文标题】提高 jQuery 模板性能

【英文标题】：Improve jQuery template performance

【发布时间】：2011-06-04 05:58:20

【问题描述】：

更新

显然，可以编译 jQuery 模板，它有助于模板的性能与 if 语句 显示here。

但如here 所示，预编译的 jQuery 模板对我的情况没有多大作用，因为我的模板不包含逻辑块。

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

---

嗨，

就在今天，有人告诉我使用 jQuery 模板存在性能问题。

为了比较，我使用了 jQuery 模板和旧的字符串追加方法来向表中添加行。结果可见here。与字符串追加方法相比，使用 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>

谢谢，

智

【参考方案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

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

【讨论】：

嗨吉姆！感谢您的意见 :) 您的演示文稿很棒。我仍然对编译模板的事情感到非常困扰。我不知道它在后台做了什么，但似乎只有在模板中有条件块时，编译的模板才会有所作为。我为此写了一个测试，看看问题中的“更新”块。很奇怪吧？

Chi - 尝试将上面的代码“插入”到您的测试中作为第二次更新，看看有什么不同。我估计数字会下降 60-70%...

我认为你的性能测试有缺陷。也许它不会有什么不同，但我会在不测量的情况下运行第二个“$.tmpl”语句一次，然后然后运行它 1000 次，看看它有多快。该方法可能在第一次运行时在幕后进行了一些优化。至少我肯定希望如此。简而言之，您的第二个 1000 次运行包括在运行 #1 上进行的任何可能的优化。

【参考方案2】：

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

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

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

【讨论】：

我认为这是最接近的答案......基本上，等待 jQuery 模板提高性能。现在，我会尽量不要过度依赖它。

如果您确实需要获得惊人的速度，请使用下划线。它更接近原生 javascript。当然，您必须稍微更改/调整您的 jQuery 模板（如果您使用循环/条件逻辑和其他复杂的东西，则更多）。好消息是，尽管缺乏详尽的文档，您仍然可以管理所有这些，并且在某些情况下，比 jQuery 方式更容易。

【参考方案3】：

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

这是jsperf benchmark that generates 1,000 rows of 10 columns and renders it. I'm averaging 200-250ms to render Chrome 9 中的 1000 行。

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

【讨论】：

我们不是尝试做 1000 行，而是 100 行。 100 行还不错:)。我想快速测试模板的性能，因为我们正在考虑构建一个交互式网格，其中每个

根据数据显示不同的结果。当然会有更多的模板逻辑，然后只是附加行。编写的测试只是一种查看性能是否会成为问题的方法。

我创建了一个新的测试构建 RAW HTML，我得到的速度似乎比 jQuery 模板快。 jsperf.com/jquery-templates-performance/4 - jQuery 模板（1.2 秒），原始 HTML（0.2 秒）！巨大的差异

如果您要复制/粘贴其他人的答案，至少要给予他们信任。 ***.com/questions/4590718/…

【参考方案4】：

您的模板非常简单，您可能想take a look at handlebars.js 这是一种模板语言，可以选择预编译模板。

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

【讨论】：

我不介意检查车把。但是他们的下载不起作用。如果我从源代码中仅引用“handlebars.js”，它将因未定义的方法“必需”而失败。你身边有 js 文件的副本吗？

显然“编译”模板只有在有逻辑控制块时才有帮助。详情请查看更新后的问题。

【参考方案5】：

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

http://mustache.github.com/