ページのレンダーパス(Page Render Passes)

まずブラウザはページファイルを要求し、インターネットでデータはパケット形式で送信され、その単位はバイト(Bytes)である.
1.htmlとcssのロード方法
htmlパケット=>元のバイトを文字=>Tokens(開始ラベル、終了ラベル、およびいくつかの属性を含むデータ構造と理解できる)=>ノード=>DOMツリー/cssツリーへの変換
html:Bytes => Characters => Tokens => Nodes => DOM
css:Bytes => Characters => Tokens => Nodes => CSSOM
CSSにはカスケードというものがあります.カスケードは、ブラウザが要素にスタイルを適用する方法を決定するメカニズムです.
2.ページのレンダリング

ブラウザはHTMLを入手後、文書

を上から下へ順に解析する.

HTMLを解析し、DOMツリーを構築する(ここでは外部チェーンに遭遇し、要求が開始される)

CSSを解析し、CSSルールツリー

を生成する

DOMツリーとCSSルールをマージし、renderツリー

を生成する.

レイアウトrenderツリー(Layout/reflow還流)は、各要素の寸法、位置の計算

を担当する.

renderツリーを描画し、ページ画素情報

を描画する.

ブラウザは各層の情報をGPUに送信、GPUは各層合成(composite)を画面

に表示する.

ここで特に注意したいのは、CSSリソースがあるため、CSSOMがまだ構築されていない前に、js(あれば)

がブロックされることです.

JavaScriptがインラインであろうとチェーンであろうと、ブラウザがscriptタグに遭遇し、JavaScript を起動すると、ブラウザ解析HTMLを一時停止し、CSSOMの構築が完了するまで待ってからjsスクリプト

を実行する.
3.ページレンダリングをブロックする

cssブロックページレンダリング;

cssはdomのレンダリングをブロックしませんが、domツリーとともにrenderツリーを生成します.(だからcssを前に置く)

jsはdomの解析

をブロックする

jsはcss解析が完了するまで

を実行します.
4.ページ・ロードの最適化

リソース要求数(インラインまたは遅延動的ロード)

を削減する.

CSSスタイルシートをできるだけ早くロードし、@importの使用を減らす.スタイルシートのすべてのimportのリソースを解析してからCSSリソースをダウンロードして

を完了する必要があるからだ.

非同期js:JavaScriptは、ブラウザにCSSOMの待機を強制し、DOMの構築を一時停止させ、最初のレンダリングの時間が

遅延する.
5.ページロードでのリフロー、再描画
Layout(レイアウト):render treeに基づいてノードの位置とサイズを計算します.
reflow(リフロー):1.コンテンツ、構造、位置、または寸法が変更され、スタイルとレンダリングツリーを再計算する必要があります.2.ブラウザは、正しい値を得るためにもリフローをトリガーします
paint(描画):計算された位置とサイズに基づいてGPUで画面にレンダリングされます.
repaint(再描画):ノードのいくつかのスタイル(背景色、枠線色、文字色など)のみを変更します.
6.reflow、repaintトリガ回数の最適化

ノードスタイルを1つずつ変更することを避け、

を一括変更する.

は、複数回の修正が必要なDOM要素をdisplay:noneに設定し、操作が完了してから表示することができる.(非表示要素はrenderツリー内にないため、非表示要素を変更してもリフロー再描画はトリガーされません)

複雑なノード要素をドキュメントフローから離脱し、還流コスト

を低減する.