フロントエンドのパフォーマンス最適化を学ぶためのhtmlページのレンダリングプロセスの理解

最近、フロントエンドのパフォーマンス最適化について学んでいるのですが、パフォーマンスのボトルネックがどこにあるのかを知るためには、ページのレンダリングプロセスを理解することが必要なのだそうです。ここでは、私が見たことのあるものをいくつか紹介し、共有します。
参考にしてください。レンダラーを理解する
このページは、以下の機能でレンダリングされます。
-シングルスレッド・イベント・ポーリング
-定義された、連続した、秩序ある操作（HTML5）
-DOMツリーの分割と構築
-リソースの要求とプリロード
-レンダーツリーの構築とページの描画
具体的には : その
DOM ツリーは、対応する HTML のバイトをウェブから取得したときに構築し始めます。これは、UIを更新するブラウザのスレッドによって処理されます。DOM ツリーの構築は、以下のような場合にブロックされます。
-HTMLレスポンスストリームがネットワークでブロックされる
-ロードされていないスクリプトがあります
-script ノードに遭遇したが、この時点ではまだアンロードされたスタイル ファイルが存在する。
レンダー ツリーは DOM ツリーから構築されるため、スタイル ファイルによってブロックされることになります。
シングルスレッド イベント ポーリングに基づいているため、スクリプトやスタイルのブロックがない場合でも、それらのスクリプトやスタイルが解析、実行、適用されると、ページのレンダリングがブロックされます。
ページ描画をブロックしないケースもある
-のdefer属性とasync属性で指定します。
-メディアタイプが一致しないスタイルファイル
-パーサーで挿入されたスクリプト ノードまたはスタイル ノードがない。
ここで、説明のための例を示します（フルコード）。 : は


コードは見やすくわかりやすく、ブラウザに入れて開けばすぐに目的のページが表示されます。ここでは、スローモーション再生を使って、実際にどのようにレンダリングされるかを見てみましょう。

まず、パーサーはexample.cssに出会い、それをネットワークからダウンロードします。スタイルシートのダウンロードには時間がかかりますが、パーサーはブロックされず、ページの解析を続行します。次に、パーサーは script タグに遭遇しますが、スタイル ファイルが読み込まれていないため、script がブロックされます。パーサーはブロックされ、解析を続行することができません。
レンダー ツリーもスタイル ファイルによってブロックされるため、この時点でページをレンダリングするブラウザはなく、つまり example.css ファイルがダウンロードされないと、Hi there!
次に、続けます。
[...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...]