提高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/