Web面接でよくある質問：リフローとリペイントの原理と違い

ブラウザのレンダリングメカニズム

1. ブラウザはページを処理するために2つのエンジンを使用し、ブラウザによってレンダリングエンジンは異なります。

レンダリングエンジン:

ChromとSafariは「WebKit」を使用します。

Firefor 「Geoko」を使用します

jsエンジン

2. ブラウザはHTMLを解析してDOMツリー、CSSを解析してCSSOM (CSS オブジェクト モデル);

3. 次にDOMツリーとCSSOMを組み合わせてレンダリングツリー(レンダリングツリー);

4. レンダリングツリーが完成すると、ブラウザはレンダリングツリーに従ってレイアウトします。レイアウトが完了すると、「ボックスモデル」が出力され、ビュー内の各ノードの位置とサイズを正確にキャプチャし、すべての測定値を画面上の物理的なピクセル値に変換します。（このステップにより、回流(reflow)が発生します）

5. レイアウトが完了すると、ブラウザはすぐにペイントスタンプイベントを発行し、レンダリングツリーを画面ピクセルに変換します。（このステップにより重繪(repaint)が行われます）

6.上記の手順を実行すると、ページが画面に表示されます。

リフローは必然的に再描画を引き起こしますが、再描画は必ずしもリフローを引き起こすわけではありません。

リフローと再塗装

リフロー

コンセプト：

要素の構造、サイズ、レイアウトなどの変更によりレンダリング ツリーの一部またはすべてが変更されると、ブラウザーは DOM の一部またはすべてを再レンダリングします。

要素ノードの位置と距離が変更されたことを強調します。

逆流を引き起こす行為：

• ブラウザウィンドウのサイズが変わる
• コンテンツの変更
• ノードを追加または削除する
• CSS疑似クラスを有効にする
• 等…

再描画

コンセプト：

ページ要素のスタイルがドキュメント フロー内の位置に影響を与えずに変更された場合、ブラウザーは単に新しいスタイルを要素に割り当てて再描画します。

要素ノードのスタイルを強調します。たとえば、色、境界線の実線が破線になります (位置と距離は変更されません)。

再描画を引き起こす操作:

• 背景色のプロパティ値が変更された場合
• border-colorプロパティの値が変更された場合
• 可視性属性値が変更された場合
• 等…

以上がWeb面接でよく聞かれるリフローとリペイントの原理と違いについての詳しい内容です。Web面接でのリフローとリペイントについてさらに詳しく知りたい方は、123WORDPRESS.COM内の他の関連記事もぜひご注目ください！