81

多数の dom elmenets とパフォーマンスについて質問があります。

ページに 6000 個の dom 要素があり、ユーザーが twitter のようにページを操作する (ユーザーがスクロールして新しい dom 要素を作成する) と、要素の数を増やすことができるとします。

ページのパフォーマンスを向上させるために考えられることは 2 つだけです。

  1. リフローを避けるために、表示を非表示のアイテムに none に設定します
  2. 非表示のアイテムを dom から削除し、必要に応じて再度追加します。

多くの dom 要素を含むページを改善する他の方法はありますか?

4

3 に答える 3

103

FoldingTextでも同様の問題に対処する必要がありました。ドキュメントが大きくなるにつれて、より多くの線要素と関連するスパン要素が作成されました。ブラウザエンジンが詰まっているように見えたので、より良い解決策を見つける必要がありました。

これが私たちがしたことであり、あなたの目的に役立つかもしれないし、そうでないかもしれません：

ページ全体を長いドキュメントとして視覚化し、ブラウザのビューポートを長いドキュメントの特定の部分のレンズとして視覚化します。あなたは本当にレンズの中の部分を見せさえすればよいのです。

したがって、最初の部分は、表示されているビューポートを計算することです。（これは、要素の配置方法、絶対/固定/デフォルトによって異なります）

var top = document.scrollTop;
var width = window.innerWidth;
var height = window.innerHeight;

よりクロスブラウザベースのビューポートを見つけるためのいくつかのリソース：

JavaScriptでブラウザのビューポートのサイズを取得する

ブラウザウィンドウのscrollTopを検出するためのクロスブラウザ方式

次に、その領域に表示される要素を知るためのデータ構造が必要です

テキスト編集用のバランスの取れた二分探索木がすでに用意されていたので、行の高さも管理できるように拡張しました。この部分は比較的簡単でした。要素の高さを管理するために複雑なデータ構造は必要ないと思います。単純な配列またはオブジェクトで問題ない場合があります。高さと寸法を簡単に照会できることを確認してください。では、すべての要素の高さデータをどのように取得しますか。非常に単純です（ただし、大量の要素の場合は計算コストが高くなります！）

var boundingRect = element.getBoundingClientRect()

私は純粋なJavaScriptの観点から話していますが、jQueryを使用している場合は$.offset、ここ$.positionにリストされているメソッドが非常に役立ちます。

繰り返しになりますが、データ構造の使用はキャッシュとしてのみ重要ですが、必要に応じて、その場で実行できます（ただし、これらの操作にはコストがかかります）。また、cssスタイルを変更してこれらのメソッドを呼び出すことに注意してください。これらの関数は強制的に再描画するため、パフォーマンスの問題が発生します。

<div>最後に、画面外の要素を単一の要素、たとえば計算された高さの要素に置き換えるだけです

  • これで、データ構造に格納されているすべての要素の高さがわかりました。表示されているビューポートの前にあるすべての要素をクエリします。

  • <div>要素の高さの合計に設定されたcssの高さ（ピクセル単位）でを作成します

  • フィラーdivがわかるように、クラス名でマークします
  • このdivがカバーするdomからすべての要素を削除します
  • 代わりに、この新しく作成されたdivを挿入します

表示されているビューポートの後にある要素に対して繰り返します。

スクロールおよびサイズ変更イベントを探します。各スクロールで、データ構造に戻り、フィラーdivを削除し、以前に画面から削除された要素を作成し、それに応じて新しいフィラーdivを追加する必要があります。

:)これは長くて複雑な方法ですが、大きなドキュメントの場合、パフォーマンスが大幅に向上しました。

tl; dr

適切に説明したかどうかはわかりませんが、この方法の要点は次のとおりです。

  • 要素の垂直方向の寸法を知る
  • スクロールされたビューポートを知っている
  • すべての画面外要素を単一のdivで表します（高さは、それがカバーするすべての要素の高さの合計に等しい）
  • 常に合計2つのdivが必要になります。1つは表示されているビューポートの上の要素用で、もう1つは下の要素用です。
  • スクロールおよびサイズ変更イベントをリッスンして、ビューポートを追跡します。それに応じてdivと表示要素を再作成します

お役に立てれば。

于 2012-09-27T03:33:13.733 に答える
27

これについては経験がありませんが、ここにいくつかの素晴らしいヒントがあります: http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5

Facebook を見てみましたが、Firefox では特に何もしていないようです。下にスクロールしても、ページの上部にある DOM 要素は変化しません。Firefox のメモリ使用量は約 500 メガまで上昇し、その後 Facebook でそれ以上スクロールできなくなります。

Twitter は Facebook と同じように見えます。

Google マップは別の話です。ビューの外にあるマップ タイルは DOM から削除されます (ただし、すぐには削除されません)。

于 2012-09-27T02:28:19.247 に答える