は、jQueryのテンプレートのパフォーマンスを向上させる

Question

更新

はどうやら、jQueryのテンプレートをコンパイルすることができ、それはhereを示す if文とテンプレートのパフォーマンスが向上します。

しかし、図に示すように、プリコンパイルされた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> 

の

おかげで、

チー

Answer 1

はあなたのテンプレートは本当に簡単です、あなたは、テンプレートをプリコンパイルするためのオプションを持っているテンプレート言語であるtake a look at handlebars.jsする場合があります。

これはレールとjqueryコアメンバーのYehuda Katzによって作られています。 http://documentcloud.github.com/underscore/

あなたは、現在入手可能なすべての異なるテンプレートフレームワークを比較し、ここでベンチマークテストスイートを見つけることができます：https://github.com/aefxx/jQote2 [ダウンロードとjqote.benchmark.htm実行]

Answer 2

はこれが最速今エンジンのようです。

jQueryテンプレートは初期段階にあり、後続の繰り返しでパフォーマンスが向上すると思います。

Answer 3

レンダリングを行うブラウザによっては、多くの部分が異なります。IE6はかなり遅くなることがあります（HTMLマークアップの1,000行の大きな行を転送し、ドキュメントに挿入することは高速ではありません）。

はここ9

より多くの重要な質問が本当にあるべきChromeのjsperf benchmark that generates 1,000 rows of 10 columns and renders it. I'm averaging 200-250ms to render 1,000行です：なぜ世界では一度に1,000行を表示していますか？常にUXの方が優れています。

Answer 4

Chi Chan、

これでトレイルに少し遅れています。テンプレートを最初にコンパイルし、文字列Id（以下のケースでは、名前付き変数templateAlias）で参照すると、実際にはオブジェクトルートを経由するより10倍高速です。ここでは、（あなたのコードサンプルに基づいて）それを達成したい方法は次のとおりです。これは、テンプレートがコンパイルされていますよう大幅procedingsをスピードアップする必要があり、あなたが.appendTo()を実行して、オブジェクト全体モデル毎回使用されることはありません

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

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

関数。 $('#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/