クローム開発ツールのタイムラインレコードでレイアウトペイントを再計算するのは何ですか？

Question

クローム開発ツールのペイントは何ですか？タイムラインの記録は何ですか？再計算、レイアウト、ペイントのカウントを減らしてページパフォーマンスを向上させる方法は？ありがとう

Answer 1

基本的には、ページに加えた変更をどのように描画するかをブラウザが判断しています。

これを取り除くことについて心配しないでください。そうした場合、サイトは静的になります。 ... ... ISは、リフローと再ペイントと関係があり、変更を一括して処理するのに便利です。

あなたはTwitterで仕事があると言います。 あなたの仕事は、各ツイッター投稿を画面に追加する次のバージョンのウィンドウを作成することです。

ユーザーがタイムラインで250個の新しいツイートを取得し、それぞれをループ内に1つずつ追加すると、ブラウザが遅くなるため、追加するたびにリフローする必要があります（追加したもののスペースを作るために物を動かして）、塗り直し（追加の影響を受けたものすべてをスタイルする）。

より良い方法は、新しいツイートのリストをDOM外で（つまり、実際にはページに実際には存在しない要素を使って）構築してから、一気に追加することです。 これは、ブラウザがすべての必要な場所を把握しなければならない回数を減らします。

@Fabricio - マイクロ最適化は大したことではないかもしれませんが、ループ内に何百ものブラウザ要素を追加すると、それらをすべて同時に配置すると大きな違いが生じます。 jQueryオブジェクトをキャッシュするのをやっていなかったTwitterの人に尋ねてください。

Answer 2

"プロファイル"タブと "監査"タブを使用して、コードのパフォーマンスを検出できます。あなたのコードについてのレポートが表示されます。

ページの再計算、レイアウト、およびペイントの数を、さまざまな方法で減らすことができます。

• 一度に多くの子を追加します。
• 要素を変更してから変更してください。
• 画像や他の要素の高さと幅を指定します。

Answer 3

ここではページのレイアウト（リフロー）をトリガプロパティとメソッドの非常に便利なリストです：

http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html

あなたは可能な限りこれらの呼び出しを最小限にしたい - 特に状況のパフォーマンスにスクロールイベント中や大きなコンテンツブロックをアニメートするときなど、重要です。