6

ほとんどのバージョンの IE で Backbone.js セットから大きな結果のテーブルをレンダリングする際に、パフォーマンスのボトルネックにぶつかっています。

他の人はこの問題をどのように回避しましたか?

これらの劣ったブラウザで出力をキャッシュできる方法はありますか?

4

1 に答える 1

22

私の推測では、行を 1 つずつ DOM に追加しています。これにより、多くのブラウザーの再描画が発生し、行がレンダリングされるときにラグや速度が遅くなるように感じます。

速度を上げる最も簡単な方法は、DOM との対話を制限することです。行を 1 つずつ DOM に挿入するのではなく、まとめて挿入します。

私が言いたいことの例を読み続けてください。

してはいけないこと:

http://jsfiddle.net/skylar/arkxp/4/

この例では、行を追加する前に、DOM にテーブルを追加する方法に注目してください。 これは、ブラウザが 1000 回再描画する原因となるため、悪いことです!

これは間違っています：

this.table = $("<table></table>").appendTo("body");
this.model.each(this.addRow);

あなたがすべきこと：

http://jsfiddle.net/skylar/arkxp/5/

この例では、すべての行を生成するまでテーブルを DOM に追加するのを待ちます。これは、DOM が1 回だけ再描画することを意味し、上記の例よりもはるかに高速です。

正解です：

this.table = $("<table></table>");
this.model.each(this.addRow);
this.table.appendTo("body");

これは、DOM とのあらゆる対話に当てはまります。いじればいじるほど遅くなります。実際、JS を高速化する最も簡単な方法は、DOM とのやり取りを制限することだとよく言われます。

すでに DOM 内にある要素に何かを追加する必要がある場合は、その要素display:noneに対してアクションを実行している間、その要素を DOM に設定するか、DOM から一時的に削除します。すべてが完了したら、それを元に戻すと、強制的に再描画が 1 回だけになります。

DOM インタラクションの最適化のコツをつかめば、アプリを改善する余地がたくさんあると思います。

最新のブラウザーは、リクエストをキャッシュして DOM を更新し、変更を「チャンク」で行うことにより、DOM の再描画を制限しています。IE (および古いブラウザー) は、変更があるたびに再描画します。これは、過剰な DOM 相互作用にもかかわらず、最近のブラウザーのパフォーマンスが向上している理由を説明している可能性があります。

于 2012-04-24T16:28:13.643 に答える