2

テンプレートが非常に単純になるように、テーブルをレンダリングしようとしています。行テンプレートは次のようになります。

  <script type=\"text/mustache\" id=\"template-list-records\">
  {{#.}}
   <tr>
    <td>{{airport_code}}</td>
    <td>{{city_code}}</td>
    <td class=\"pull-right\">
     [<a href=\"result.mics?m_uid={{airport_code}}\" class=\"listlink\">details</a>]
    </td>
   </tr>
  {{/.}}
  </script>

問題は、1000 を超える結果をレンダリングすると、レンダリング速度が指数関数的に遅くなり始めることです (常に指数関数的に遅くなると思います:)。現在、4000 件の結果で、ページは 2.3 秒で読み込まれます。7000 件の結果では、レンダリング時間は 7.3 秒で、完全な結果セット (約 8500 件の結果) のレンダリングには 10 秒かかります。今、完全な結果のロードのために8秒より速くスピードアップする必要はありません（古い機能がページをレンダリングするのにかかった時間であるため）、それはおまけになります:)、それでも必要です2秒剃ります。タイムライン インスペクタを見たところ、レンダリングに時間がかかっています。レンダリングは 2.5 秒後に開始されます。

問題の一部はラップトップにある可能性があると推測しています（グラフィックカードに問題があります）が、それでも、これを高速化する方法があるかどうかに興味があります。たとえば、8500行でテーブルをプリコンパイルし、行を追加/削除します必要です (これは実際には空港のリスト テーブルであるため、番号は頻繁に変更されることはなく、変更された場合でもあまり変更されません)。

4

3 に答える 3

3

新しいアイデア：ページを段階的にレンダリングしてみませんか？8500行はかなり多くの「ページ」（1080p画面では確かに約200「ページ」）なので、必要に応じてデータを小さなチャンクにレンダリングし続ける連続スクロールメカニズムを簡単に実装できると思います。

手始めに、最初の500アイテム（すでにたくさんあります）のレンダリングを開始し、ユーザーがスクロールを開始して、合計スクロールサイズの約80％に近づくと、200行余分にレンダリングするとします。レンダリングする行がなくなるまで、これを続けます。

すべてを一度に利用できるようにする必要があるという要件がある場合（たとえば、ユーザーがctrl + Fを実行できるようにするため）、チャンクでレンダリングを試すことができます。テンプレートにデータセット全体をフィードする代わりに、テンプレートを分割します。 500のセットで、これらの小さなセットで必要な回数だけMustacheを呼び出します。それでも詰まる場合は、呼び出しの間に小さなタイムアウトを追加して、知覚される応答性を向上させます。

TBH、私はあなたの質問を読み直しました、そしてあなたの時間のほとんどはあなたのテーブルレイアウトを計算するためにブラウザに費やされているようです、それでこれらの提案はあなたの場合にうまくいくはずです。最後の手段として、CSStable-layout: fixed;を試してみると、テーブルのレンダリングが大幅に高速化されますが、テーブルの内容に基づいて列幅が動的に調整されなくなるため、列幅を手動で定義する必要があります。

于 2013-01-16T19:56:38.693 に答える
2

HoganやHandlebarsなどの別の Mustache 実装を試しましたか?

あなたのテンプレートは非常に小さいので、事前にコンパイルされたテンプレート機能を使用して勝つことはあまりありませんが、特に Hogan の場合、レンダリング アルゴリズムを可能な限り高速化するように微調整されているため、単純にバニラのムスタッシュよりも代替の実装を使用すると、問題は既に解決されます。

また、Mustache.js の最新バージョンをまだ使用していない場合は、単純にアップグレードしてみてください。古いバージョン (約 1.5 年前) には、深刻なパフォーマンスの問題がありました。

于 2013-01-16T15:47:42.077 に答える
1

口ひげでレンダリングされた HTML を DOM にどのように追加しますか?

連続して挿入するのではなく、レンダリングされたコードを 1 点で追加してみてください。

遅い、多くの挿入:

for () {
  table.innerHTML = table.innerHTML + Mustache.render(row);
}

高速、1 挿入:

var buffer = '';
for () {
  buffer = buffer + Mustache.render(row);
}
table.innerHTML = buffer;
于 2014-08-28T11:10:43.377 に答える