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

ブラウザコンポーネント

≪ユーザー・インタフェース｜User Interface｜ldap≫:要求されたページを表示するウィンドウ(アドレス・バー、前のボタンおよび次のボタンおよびブックマーク・メニュー)のほか、ユーザーが操作できる残りのすべての部分

ブラウザエンジン:ユーザーインタフェースとレンダリングエンジンの間に接続を確立します.

データストレージ:クッキーなどをハードディスクに格納します.HTML 5からWebデータベースに格納できます.

レンダリングエンジン:ブラウザエンジンからコンテンツリクエストをURI形式で受信します.通信でデータを要求する.に対する境界温度ノードが作成できません.ChromeはWebkitを使った後、2013年からBLINKで代用したそうです.

通信:レンダリングエンジンからのHTTP等の要求を受け、処理後に応答する.

JAvascript解釈器:javascriptをグループ化して実行します.クロムでは、V 8エンジンはここに属しています.

UIバックエンド:ブラウザにレンダリングツリーを描画します.

各コンポーネントの作業

ユーザは、ユーザインタフェースにアドレスを入力し、ブラウザエンジンにアドレスを渡す.

ブラウザエンジンは、リポジトリ内で関連資料を検索し、Cookieなどに格納されている場合はレンダリングエンジンに渡す.

レンダリングエンジンは、通信層にデータを要求する.応答するデータでは、HTMLとCSSはレンダリングエンジンによってグループ化される.

応答のデータでは、JavascriptはJavascriptインタプリタによって割り当てられる.

Javascriptインタプリタは、データマイニングの結果をレンダリングエンジンに渡してDOMツリーを操作します.

操作が完了したDOMノード(DOMツリーコンポーネント)は、renderオブジェクト(render treeコンポーネント)になります.

UI beck側は、レンダリングオブジェクトをブラウザレンダリング画面上に配置する.

レンダーパス(Render Passes)

HTMLタグをグループ化してDOMツリーを生成します.

CSSマークアップをブロックし、CSOMツリーを生成します.

DOMツリーとCSSOMツリーを組み合わせてレンダーツリーを生成します.このプロセスをAttachmentと呼びます.

ビューポートで各ノードの位置とサイズを計算します.このプロセスをLayout(Webスイート)またはReflow(ゲイコ)と呼びます.

要素の位置、サイズ、スタイルの計算が完了したレンダリングツリーを使用して、ブラウザは画面に要素を描画できます.このプロセスをPaintと呼びます.

このプロセスは、ドキュメントがすべてロードされるまで続行されます.

ブラウザレンダリングの最適化

現在、多くの機械は毎秒60 fpsの周波数でスクリーンをリフレッシュし、計算するとフレーム当たり約16.66ミリ秒の時間がかかる.画面にフレームを表示する前に、ピクセルパイプラインは次のようになります.

Javascript:JavaScript処理DOMに影響するコード

スタイル:CSSルールに基づいて、どのルールがどの要素に適用されるかを計算します.

Layout:位置とサイズを計算します.

Paint:ピクセルを塗りつぶし、要素をリアル画面に描画します.

Composite:ページは複数のレイヤに描かれているので、どの部分が先に置かれ、どの部分が重なるかを決定します.

パイプラインでは、前のプロシージャが後のプロシージャを呼び出すため、ReflowおよびRepaintプロシージャを最小限に抑えることがレンダリング最適化方法の1つです.

Reflowを引き起こすCSS属性と比較して、RepaintまたはCompositeを引き起こす属性を使用します。

次のリンクを参照して、Reflowが発生するプロパティと、Compositeのみが発生するプロパティを決定してください.
https://csstriggers.com/
Reflow

position, width, height, left, top, right, bottom, margin, padding, border, border-width,
clear, display, float, font-family, font-size, font-weight, line-height, min-height,
overflow, text-align, vertical-align, white-space

Repaint

background, background-image, background-position, background-repeat, background-size,
border-radius, border-style, box-shadow, color, line-style, outline, outline-color,
outline-style, outline-width, text-decoration, visibilty

インフルエンスノードの最小化

親ノードの変更は子ノードにも影響するので、できるだけノードを変更することが望ましい.

を使用して多絶対を位置決めすると、還流プロセスを除去し、影響を受ける周囲ノードを低減することができる.

フレーム数を減らす

1秒移動0.1 px=>3秒移動0.3 px,還流過程3倍減少.

参考資料

https://developers.google.com/web/fundamentals/performance/rendering
https://d2.naver.com/helloworld/59361
https://chanyeong.com/blog/post/43
https://davidhwang.netlify.app/Developments/browser-rendering-process/