提高jQuery的模板性能

Question

更新

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

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

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

---

嗨，

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

为了进行比较，我使用了jQuery模板和良好的旧字符串append方法将行添加到表中。结果可以看到here。与字符串附加方法相比，使用jQuery模板大约慢65％，Ouch！

我想知道怎样才能提高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

你的模板是非常简单的，你可能想take a look at handlebars.js这是具有预编译模板的选项模板语言。

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

Answer 2

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

您可以在这里找到一个基准测试套件，比较目前市面上所有不同的模板框架：https://github.com/aefxx/jQote2 [点击下载和运行jqote.benchmark.htm。

我确实认为jQuery模板处于初期阶段，在随后的迭代中性能会提高。

Answer 3

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

下面是在Chrome浏览器jsperf benchmark that generates 1,000 rows of 10 columns and renders it. I'm averaging 200-250ms to render 1000行9

更重要的问题确实应该：世界为什么你一次显示1000行？除此之外，总是有更好的用户体验选择。

Answer 4

陈志

有点迟了跟这一个。我发现首先编译模板，然后通过字符串ID引用它们（在下面的情况下，命名变量templateAlias）实际上比通过对象路径快10倍。这里是你如何做到这一点（基于您的代码示例）：

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

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

为模板，将已编译这应该显著加快procedings并不会使用整个对象模型每次运行.appendTo()功能。使用$('#tmplRow').tmpl(data).appendTo('#table');意味着$('#tmplRow')查询DOM，而$.tmpl(templateAlias, data).appendTo('#table');仅基于对模板的引用添加到DOM。关于这个问题有很多的阅读。

这里有一个链接，可以帮助：

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

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

Answer 5

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

http://mustache.github.com/