フロントエンドのパフォーマンス最適化の学習に備えて、HTML ページのレンダリング プロセスを理解する_HTML/Xhtml_Web ページの制作

最近、フロントエンドのパフォーマンスの最適化について学んでいます。適切な薬を処方し、パフォーマンスのボトルネックを見つけるには、ページのレンダリング プロセスを理解する必要があります。ここで私が見たものをいくつか紹介します。
参考: レンダラーについて理解する
ページのレンダリングには次の特徴があります:
•シングルスレッドのイベントポーリング
•明確に定義された、継続的で順序立てた操作 (HTML5) )
•単語のセグメンテーションと DOM ツリーの構築
•リソースのリクエストとプリロード
•レンダリング ツリーの構築とページの描画
具体的には:
HTML をnetwork 対応するバイトに達すると、DOM ツリーの構築が開始されます。これは、UI を更新するブラウザーのスレッドが担当します。次の状況が発生した場合、DOM ツリーの構築はブロックされます。
•HTML 応答フローがネットワークでブロックされている
•アンロードされたスクリプトがある
•スクリプト ノードが検出されましたが、このスタイル ファイルがまだアンロードされています
レンダリング ツリーは DOM ツリーから構築されており、スタイル ファイルによってブロックされます。
シングルスレッドのイベントポーリングに基づいているため、スクリプトやスタイルがブロックされていない場合でも、これらのスクリプトやスタイルが解析、実行、適用されると、ページのレンダリングがブロックされます。
ページ レンダリングをブロックしないいくつかの状況:
• 定義された defer 属性と async 属性
• 一致するメディア タイプ スタイル ファイルがない
• パーサーに渡されなかった スクリプト ノードの挿入またはスタイル ノード
以下に例 (完全なコード) を示します :

コードをコピー

コードは次のとおりです。

こんにちは!

<script> <br> document.write('<script src="other.js">&lt ;/ scr' 'ipt>'); <br> </script>
またこんにちは!