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

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内の他の関連記事もぜひご注目ください!

以下もご興味があるかもしれません:
  • ブラウザのリフローと再描画を減らす方法
  • JavaScript における Repaint と Reflow の使用方法の詳細な説明
  • JavaScript パフォーマンスの最適化 (再描画とリフロー)
  • 高性能な WEB 開発ページのレンダリング、再描画、リフロー。

<<:  Linux で libudev を使用して USB デバイスの VID と PID を取得する方法

>>:  Navicat 経由で MySQL にリモート接続する方法

推薦する

CentOS 7 は Hadoop 2.10 の高可用性 (HA) をビルドします

この記事では、CentOS 7 で高可用性 Hadoop 2.10 クラスターを構築する方法を紹介し...

WeChatアプレットタブの左右スライドスイッチ機能実装コード

効果画像: 1. はじめに独自のアプレットでこのような機能を実装する必要がある1. 核となる考え方ス...

入力ファイルの制御と美化について

一部のWebサイトでアップロードする場合、「参照」ボタンをクリックすると、[ファイルの選択]ダイアロ...

Nginx 構成 80 ポート アクセス 8080 とプロジェクト名アドレス メソッド分析

Tomcatはプロジェクトにアクセスします。通常はIP + ポート + プロジェクト名です。 Ngi...

LinuxにNginxをインストールする詳細な手順

1. Nginxのインストール手順1.1 公式サイトの紹介http://nginx.org/en/d...

JS オブジェクト配列の重複排除のための 3 つの方法の例と比較

目次1. 重複排除前後のデータの比較2. 使い方1. フィルターとマップを使用する2. 削減を使用す...

Win10 での MySQL 8.0.16 のインストールと設定のチュートリアル

1. MySQL 8.0.16を解凍する次の図に示すように、解凍後にdadaフォルダとmy.ini構...

JavaScript でカウントダウン効果を実装する

カウントダウン効果を実現するにはJavascriptを使用します。参考までに、具体的な内容は次のとお...

Vue router-viewとrouter-linkの実装原理

使用 <div id="アプリ"> <router-link ...

MySQLのパスワードを忘れた場合の対処方法

MySQL パスワードを 2 回忘れてしまいましたか?最初、私はアンインストールして再インストールす...

ショッピングカートのスライド削除効果を実装するReactネイティブサンプルコード

基本的にすべてのeコマースプロジェクトにはショッピングカートの機能があります。これはreact-na...

Vue+Elementでページング効果を実現

この記事の例では、ページング効果を実現するためのvue+Elementの具体的なコードを参考までに共...

CentOS7でパーティションのサイズを変更する方法

昨日、ある人のシステムのインストールを手伝ったのですが、自動パーティション分割をクリックするのを忘れ...

xshellを使用してLinuxサーバーに接続する

xshellを使用してLinuxに接続する利点Windows環境でLinuxを直接操作できるインター...

16進カラーコード(完全版)

赤とピンク、およびそれらの 16 進コード。 #990033 #CC6699 #FF6699 #FF...