8

Webページには、非常に多くのアイテムのリストがあります（たとえば、製品カードには、それぞれに画像とテキストが含まれています）。そのうちの約1000個です。クライアントでこのリストをフィルタリングしたいのですが（フィルタリングされていないアイテムのみを表示する必要があります）、レンダリングパフォーマンスの問題があります。非常に狭いフィルターを適用し、残りのアイテムは10〜20個だけです。その後、キャンセルすると（すべてのアイテムを再度表示する必要があります）、ブラウザー（非常に優れたマシンのChrome）が1〜2秒ハングアップします。

次のルーチンを使用してリストを再レンダリングします。

for (var i = 0, l = this.entries.length; i < l; i++) {
    $(this.cls_prefix + this.entries[i].id).css("display", this.entries[i].id in dict ? "block" : "none")
}

dictは、許可されたアイテムのIDのハッシュです。

この関数自体は即座に実行され、ハングアップするのはレンダリングです。DOM要素の「display」プロパティを変更するよりも最適な再レンダリング方法はありますか？

よろしくお願いします。

4

3 に答える 3

7

なぜ1000アイテムをロードするのですか？まず、ページネーションのようなものを検討する必要があります。1ページあたり約30個のアイテムを表示しています。そうすれば、あなたはそれほど多くをロードしていません。

次に、その「多くのアイテムをループする」ことに本当に興味がある場合は、タイムアウトの使用を検討してください。これが私がかつて持っていたループの結果を説明するデモです。UIをブロックし、特に長いループでブラウザが遅れる原因になります。ただし、タイマーを使用する場合は、各反復を遅らせて、ブラウザーがときどき呼吸し、次の反復が開始する前に何か他のことを実行できるようにします。

もう1つの注意点は、リペイントとリフローを避ける必要があるということです。つまり、必要のないときに要素を移動したり、スタイルを変更したりすることは避けてください。また、もう1つのヒントは、実際には表示されていないノードをDOMから削除することです。何かを表示する必要がない場合は、それを削除します。なぜ実際には見られないものを置いてメモリを浪費するのですか？

于 2012-04-14T05:53:52.447 に答える
1

おい-「大量のDOM要素」を処理する最良の方法は、クライアントでそれを行わないこと、および/または回避できる場合はJavascriptを使用しないことです。

より良い解決策がない場合（そしておそらくあると確信しています！）、少なくともその時点で実際に表示する必要があるものにワーキングセットを分割します（全体の大きなホンキンエンチラーダではありません！）

于 2012-04-14T05:49:51.203 に答える
0

setTimeoutメインスレッドからループ呼び出しをオフロードし、クライアントのフリーズを回避するトリックを使用できます。最初から最後までの全体的な処理は同じ時間続くと思いますが、少なくともこの方法でインターフェースを使用することができ、その結果、ユーザーエクスペリエンスが向上します。

for (var i = 0, l = this.entries.length; i < l; i++) {
  setTimeout(function(){
    $(this.cls_prefix + this.entries[i].id).css("display", this.entries[i].id in dict ? "block" : "none")
  }, 0);
}
于 2016-08-21T10:08:44.483 に答える