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()関数を実行するたびにオブジェクトモデル全体が使用されることがなくなるため、処理が大幅に高速化されます。使用とは、DOMをクエリすることを$('#tmplRow').tmpl(data).appendTo('#table');意味しますが、テンプレートへの参照に基づいてDOMに追加するだけです。このテーマについてはかなりの読み物があります。$('#tmplRow')$.tmpl(templateAlias, data).appendTo('#table');

これが役立つかもしれないリンクです：

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マークアップを転送し、それをドキュメントに挿入することも高速ではありません）。

これは、10列の1,000行を生成してレンダリングするjsperfベンチマークです。Chrome 9で1,000行をレンダリングするのに平均200〜250ミリ秒です。

より重要な質問は、実際には次のようになります。なぜ世界で一度に1,000行を表示するのですか？それよりも優れたUXの選択肢は常にあります。

于 2011-01-09T13:19:57.210 に答える
0

誰も口ひげについて言及しませんでした。2011 年後半、一般的なテンプレート フレームワークの中で、musache が最高のパフォーマンスを発揮しました。

http://mustache.github.com/

于 2012-01-15T12:29:34.900 に答える
0

テンプレートは非常にシンプルです。テンプレートをプリコンパイルするオプションを持つテンプレート言語である handlebars.js を参照してください。

Rails と jquery のコア メンバーである Yehuda Katz によって作成されました。

于 2011-01-06T00:19:54.677 に答える