0

KnockoutJS を使用して仮想化されたリストを作成するために取り組んでいるウィジェットを投稿し、不足している可能性のある最適化を見つけたいと思いました。

画面外の要素を仮想化するためにCSS display:noneを使用して研究を行っていると、さまざまな回答が得られます。そうすることで、ブラウザの「レンダリング」サイクルを回避できると聞いていますが、要素は「dom」更新サイクルで引き続き処理されます。私のテストでは、display:none を設定すると(ノックアウトを可視にバインドすることにより)、アイテムの初期量の追加が確実に高速化されたようです。

最後に、私の仮想化バインディング ハンドラーでは、現在、スクロール位置とウィンドウの高さを取得することで、現在の viewPort を取得しています。これにより、ウィンドウ内インデックス(indexes * rowHeight)をdisplay:blockに設定できます。ただし、その他の非表示のインデックスを非表示にするために、反復処理を繰り返し、それぞれをdisplay:noneに設定します。これは明らかに操作全体を実行するための O(n) ですが、別の方法はありません。これを最適化する方法はありますか？リセットするdisplay:noneをキューにオフロードするほうがよいでしょうか?

http://jsbin.com/axupap/56/edit

どんな洞察も大歓迎です！

4

2 に答える 2

1

を表示なしに設定しても意味がありません。より良いパフォーマンスを実現するには、「if」バインディングを使用します。この方法では、要素が DOM から完全に削除されます。これにより、すべてのパフォーマンスが向上します。ブラウザは、より小さなツリーでより少ない作業を行う必要があり、再描画とリフローがはるかに簡単になります。

たとえば、このBig Scrollデモを参照してください。すべてのアイテムをツリー ブラウザーに入れると、クロールされます。

于 2013-05-27T20:42:51.057 に答える
0

Web のような一貫性のない最悪のプラットフォームで実行できる最善の方法は、ビューポートに含まれる要素のみをブラウザーにレンダリングさせることです。次のアルゴリズムを提案します。

      1) get the current scroll height
      2) compute the index of the element at the top
      3) get the remaining elements (using offsets from top index)
      4) push these to the rendering queue which finally renders the elements.

この方法では、非常に重く、すべての兄弟バインディングを不必要に再評価する if バインディングに触れません。

もう 1 つ、大量のデータを扱う場合は、ノックアウト foreach バインディングまたはテンプレート バインディングを使用しないでください。代わりに純粋な javascript を使用すると、dom API はパフォーマンスを大幅に向上させる「DocumentFragment」と呼ばれるものを提供します。

于 2013-10-04T20:57:03.973 に答える