ページ レンダリング リフロー テストのメモ_html/css_WEB-ITnose

ページのリペイント(再描画)、リフロー(リフロー)、以前見ただけでよく理解できなかったので、メモを残しておきます

役立つリンクをいくつか

。

http://www.zhangxinxu.com/wordpress/2009/10/attention-reflow-to-make-web-faster/

http://www.zhangxinxu.com/wordpress/2010/01/%E5% 9B%9E%E6 %B5%81%E4%B8%8E%E9%87%8D%E7%BB%98%EF%BC%9Acss%E6%80%A7%E8%83%BD%E8%AE% A9javascript%E5%8F %98%E6%85%A2%EF%BC%9F/

まず第一に、ブラウザがページをどのようにレンダリングするかを大まかに知る必要があります

ドキュメントが最初に読み込まれるときに、ブラウザ エンジンHTML ドキュメントを解析して DOM 要素の幾何学的プロパティに基づいてレンダリング用のツリーを構築します。レンダリングツリーの各ノードには、ボックスモデルと同様にサイズやマージンなどの属性があります（非表示要素を表示する必要がないため、レンダリングツリーにはDOMツリー内の非表示要素が含まれません）。レンダリング ツリーが構築されると、ブラウザは要素を正しい位置に配置し、レンダリング ツリー ノードのスタイル属性に基づいてページを描画できます。

とにかく、再描画とリフローを理解するにはボックス モードを知る必要があります

再ペイント

レンダー ツリー内の一部の要素が属性を更新する必要がある場合、これらの属性は要素の外観とスタイルにのみ影響しますが、レイアウトには影響しません。背景色など。それは redraw と呼ばれます

これはインターネットからコピーした文章です、理解しやすいです、外観を変更してもレイアウトは変更されず、他の dom には影響しません

リフロー

ここが重要なポイントです

用語リフローとは、ドキュメントの一部または全体を再レンダリングするために、Web ブラウザがドキュメント内の要素の位置と形状を再計算するプロセスを指します。リフローはブラウザーでのユーザー主導のモジュール操作であるため、リフロー時間を改善する方法と、リフロー時間に対するさまざまなドキュメント プロパティ (DOM ノードの深さ、CSS レンダリング効率、スタイル変更のさまざまな影響) を知ることは、開発者にとって非常に役立ちます。 。場合によっては、単一の要素のみがリフローされる場合でも、その親要素とそれに続く要素もリフローする必要がある場合があります

インターネットからコピーしました、私の理解によれば、リフローは操作が非常に簡単で、非常に簡単ですパフォーマンスに影響するため、より注意を払い、リフローを引き起こさないようにする必要があります

では、なぜパフォーマンスに影響するのでしょうか?

要素のリフローは、その後の DOM 内のすべての子要素とその直後の祖先要素のリフローを引き起こします。 .

この文もインターネットからコピーしたものですが、リフローは自分自身に影響を与えるだけでなく、他の要素の再配置や計算（スタイルの計算を含む）にも影響を与えるということです

とにかく、最後の文はリフローです。影響は非常に大きいので、それを理解し、できるだけ起こらないようにする必要があります

どのような操作によってリフローが発生しますか?

1. ウィンドウのサイズを変更する (ウィンドウのサイズを変更する)

2. フォントを変更する)

3. スタイルシートの追加または削除

4. ユーザーが入力ボックスにテキストを入力するなどのコンテンツの変更

5. CSS 疑似クラスのアクティブ化 (hover など) (IE では兄弟の疑似クラスのアクティブ化))

6. クラス属性の操作 (クラス属性の操作)

7. DOM を操作するスクリプト

8. offsetWidth および offsetHeight 属性の計算offsetHeight)

9. スタイル属性のプロパティを設定する )

10. スクロール バーをドラッグすると、常にリフローが発生します

オンラインでコピーすると、実際にリフローが発生する可能性があります

なぜそれが可能ですか?スタイルは背景と色を変更するだけかもしれません。必ずしもリフローではなく、単に再描画しているだけかもしれません

リフローを回避するにはどうすればよいですか? (または、リフローを最小限に抑えるには)

1. 不必要な DOM の深さを減らします。 DOM ノード ツリー内のどのレベルを変更しても、ルート ノードから変更された子ノードに至るまで、ノード ツリーのすべてのレベルに影響するためです。ノードの深さを不必要にすると、リフローの実行にかかる時間が長くなります。

2. CSSを整理して無駄なCSSを削除する

3. アニメーション効果など複雑なパフォーマンスを変更したい場合は、この動線の外側に実装してください。これを実現するには、position-absolute または location-fixed を使用します。

4. 不要な複雑な CSS セレクター、特にサブセレクターの使用、またはセレクターのマッチングを行うためにより多くの CPU を消費することは避けてください。

5. offsetWidth の計算でもリフローが発生するため、変数を使用して保存します

6. 複数のスタイルを一度に変更するには、cssText を使用するか、className を直接追加します

注: リフローでは必ず再描画が発生します。また、再描画によって必ずしもリフローが発生するとは限りません。

再描画とリフローをテストするにはどうすればよいですか?

Speed Tracer というテスト ツールがあるとオンラインで読みましたが、Chrome ウェブ ストアでは見つかりません!

その後、ページのレンダリング アドレスを確認する方法についての記事を見ました http://www.ghugo.com/chrome-rendering-tools-1/

Chrome Opera はこのようにテストできます、ff、Safari はその方法を知りませんやってみます

主にページがレンダリングされているか、レンダリング領域の大きさをユーザーに確認させることができます(ただし、再描画とリフローの区別はできないようです)

操作方法

1. 開発者管理に電話します。ツール(f12)

2 .escキーを押します

3. [レンダリング]タブを選択します

4. [ペイント長方形を表示]タブにチェックを入れます

写真のように

操作すると、次のようになります。要素がレンダリングされると、その要素が表示されます。 緑色のボックスはレンダリング領域を示します

これは、上記のリフローとレンダリングの一部をテストするために使用できます

1. 位置は固定されており、スクロール バーをドラッグするとリフローが続きます

テストの結果、確かに常にレンダリングされていることがわかりましたが、それでも他の dom に影響を与えず、自分自身にのみレンダリングする方が良いです

2. ウィンドウ サイズを調整し、ブラウザをズームします

テストでは、ページ全体が表示されることがわかりました。がレンダリングされているため、これはより大きな影響を与えるリフローであるはずです

3. 要素の削除

が削除される前に削除されていませんでした

テストでは、その背後にある要素に影響を与えることが判明しましたが、影響はありませんでした。前の要素

4. フォントの変更

はそれ自体とその下の要素に影響します レンダリング

5. ホバーをトリガーする

再描画するだけの場合は、自分自身にのみ影響します (背景、フォント色の変更など) )

リフローの場合、その下の要素のリフローに影響します(フォント、高さの変更など)

6. offsetWidth と offsetHeight を計算します

これはテストされておらず、ページはレンダリングされます -_ -!

リフローと再描画をテストするのは面倒なことです

でも、ページのレンダリングを確認したいだけなら、Chromeのレンダリングで十分です