🖥 ブラウザの動作原理と最適化

ブラウザとは?

ブラウザは、インターネット上でWebページにアクセスするためのソフトウェアです.
『NAVER、Google、次ページ』などのページにアクセスするには、『Chrome、Safari、Internet Explorer』などのブラウザでアクセスする必要があります.

ブラウザのキー機能

ブラウザの主な機能は、ユーザーが選択したリソースをサーバに要求し、ブラウザに応答するリソースを表示(レンダリング)することです.
リソースは通常HTMLドキュメントですが、PDF、画像などの他の形式で使用できます.ブラウザ・アドレス・ウィンドウにURLを入力してWebサーバを要求すると、Webサーバはリソースに応答し、一連のプロセスを通じてWebページを提供します.
通常、ブラウザとWebサーバは異なるコンピュータ上に存在します.そのため、Webサーバが稼働しているコンピュータのアドレスをIPアドレスと呼ぶ必要があります.
IPアドレスは192.168.0.1などの数字で構成されており、暗記しにくいため、naver.com、google.comなどのドメイン名が使用される.このとき,IPアドレスとドメイン名アドレスを互いに変換する際にDNSを用いる.

ブラウザの基本構造

ユーザーインタフェース(UI)
:アドレスウィンドウ、前ページ/次ページボタン、ブックマークなどのすべての要求ページの残りの部分

.

ブラウザエンジン
:ユーザインタフェースとレンダリングエンジンとの動作制御

レンダリングエンジン
:要求の内容を表示する

通信
:

ネットワークコール用(HTTP要求)

JavaScriptインタプリタ
:JavaScriptコード

の解釈と実行

UIバックエンド
:基本デバイスレンダー

、チェックボックスとコンボボックスを含む

リポジトリ
:クッキーストレージなどのデータストレージ層.Webデータベース

レンダーモーションパス(Render Motion Passes)

上図はレンダリングエンジンの基本的な動作手順です.ネットスイートエンジンを基準に、詳しく調べてみます.

1.文書オブジェクトモデルとCSSオブジェクトモデルを作成し、JSを解釈する

HTMLドキュメントとスタイルシートドキュメントは、それぞれParserによってグループ化され、オブジェクトモデルとして作成されます.それがDOMとCSSOMです.

DOMの構築は漸進的である.ユーザー体験のために、HTML全体がパケット化されるのを待つ必要はありません.表現可能なコンテンツの一部を漸進的にレンダリングします.

HTMLドキュメントは、文法的に意味のある最小単位タグに分解され、タグの内容に応じてオブジェクトに変換され、各ノードが生成される.ノードは親子関係を持つツリー構造を形成することによってDOMを生成する.

HTMLドキュメントを行ごとにスライスしてDOMを生成し、スタイルラベルに遭遇したときにDOMの生成を一時停止し、CSOMの生成プロセスを行います.

javascriptをロードするscriptタグに遭遇した場合、DOMの作成は一時停止され、javascriptエンジンでグループ化されます.

2.nder Treeの構築

生成された

DOMとCSSOMを合成してレンダリングツリーを作成します.

DOMのルートディレクトリから、ブラウズ時にブラウザに表示されないノード(script、metaラベルなど)やdisplay:noneなどのプロパティのノードがレンダーツリーから除外されます.

ブラウザに表示される各ノードに適用されるCSSOMルールを見つけて適用し、コンテンツと計算されたスタイルとともにレンダリングツリーを生成します.

3.配置Layout

レンダリングツリーを生成した後、ビューポートの正確な位置とサイズを相対単位(vh、vw、%、rem...)で計算します.絶対単位pxに変換します.

4.レンダリングツリーの描画

レンダリングツリーの各ノードがブラウザに表示されると、paintingメソッドが呼び出され、画面にUIが表示される.

Webパフォーマンスの最適化

通信により応答のデータサイズ(バイト数)を最低

に下げる.

の重要なリソース(リソース)数を減らす

キーレンダーパス(CRP)の長さを減らす

CRP의 길이란?
웹 서버로부터 중요한 자원을 응답 받기 위해 왕복해야하는 횟수

最小化、圧縮、キャッシュ

: HTML, CSS, JS

cssはレンダリングプロセスを妨げます.レンダリングを回避する方法は?
:inlineスタイルシートまたはメディアクエリー

を使用

jsはhtmlドキュメントのパケット化を妨げる.ボクシングを止めない方法はありますか?
:jsは運転を保留します.deferプロパティまたはasyncプロパティの使用

リファレンス
ブラウザはどのように動作しますか?NaverD2
Webブラウザの動作原理を理解する
[IT技術]Webブラウザの動作原理開発カラス様
Webパフォーマンス最適化Udacity YouTube