クロム開発者ツールのTimeLineレコードでRecalculate Layout Paintとはどういう意味ですか? ページの再計算、レイアウト、ペイントの回数を減らしてページのパフォーマンスを向上させる方法は? いくつかの提案を与えることができますか?ありがとう
質問する
8948 次
3 に答える
17
基本的に、それらは、ページに加えた変更をどのように描画するかを考え出すブラウザーです。
それらを取り除くことを心配する必要はありません。そうした場合、サイトは静的になります。ただし... ...リフローと再描画に関係するパフォーマンスに役立つことをしたい場合は、変更をまとめてバッチ処理してください。
あなたがTwitterで仕事を得たとしましょう。あなたの仕事は、各 Twitter 投稿を画面に追加する次のバージョンのウィンドウを作成することです。
ユーザーがタイムラインに 250 件の新しいツイートを取得し、1 つ 1 つ追加するたびにリフローする必要があるため、ブラウザーの速度が大幅に低下します。追加したもののためのスペースを空けるため)、再描画します (追加によって影響を受けたすべてのスタイルを設定します)。
それを行うためのより良い方法は、新しいツイートのリストをオフ DOM (つまり、現在実際にはページにない要素) でまとめて作成し、それらを一度に追加することです。これにより、ブラウザーがどこに移動する必要があるかを把握しなければならない回数が削減されます。
@Fabricio -- マイクロ最適化は良くないかもしれませんが、何百ものブラウザ要素をループに追加するのと、それらすべてを同時に挿入するのは大きな違いを生む可能性があります。jQuery オブジェクトをキャッシュすることを気にしていない Twitter 関係者に聞いてみてください。
于 2012-07-24T03:03:20.320 に答える
6
ページのレイアウト (リフロー) をトリガーするプロパティとメソッドの非常に便利なリストを次に示します。
http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html
これらの呼び出しを可能な限り最小限に抑える必要があります。特に、スクロール イベント中やコンテンツの大きなブロックをアニメーション化するときなど、パフォーマンスが重要な状況ではそうです。
于 2012-11-15T05:41:36.123 に答える
2
「プロファイル」タブと「監査」タブを使用して、コードのパフォーマンスを検出できます。は、コードに関するレポートを提供します。
ページの再計算、レイアウト、およびペイントの回数を多くの方法で減らすことができます。
- 一度に多くの子を追加します。
- 変更する前に要素を非表示にします。
- 画像やその他の要素に高さと幅を与えます。
于 2012-07-24T03:01:16.693 に答える