最近、フロントエンドのパフォーマンスの最適化を学んでいます。適切な薬を処方し、パフォーマンスのボトルネックを見つけるには、ページのレンダリングプロセスを理解する必要があります。以下は私が見たことがありますが、私はそれらをあなたと共有します。
参照：レンダラーの理解
ページのレンダリングには、次の特性があります。•シングルスレッドイベントポーリング
•明確に定義され、継続的で整然と操作（HTML5）
•パーティションおよび建物DOMツリー
•リソースとプリロードを要求します
•レンダリングツリーを構築し、ページを描画します
具体的には：ネットワークからHTMLの対応するバイトを取得すると、DOMツリーが構築され始めます。 UIを更新するスレッドは、ブラウザに責任があります。 DOMツリーのビルドは、次のときにブロックされます
•HTML応答ストリームはネットワークでブロックされています
•アンロードされたスクリプトがあります
•スクリプトノードに遭遇しましたが、現時点ではまだアンロードされたスタイルファイルがありました
レンダリングツリーはDOMツリーから構築されており、スタイルファイルによってブロックされます。
シングルスレッドイベントポーリングに基づいているため、たとえスクリプトやスタイルがブロックされていなくても、これらのスクリプトまたはスタイルが解析、実行、適用されると、ページのレンダリングがブロックされます。
ページレンダリングがブロックされない場合：•定義された延期属性と非同期属性
•一致するメディアタイプのないスタイルファイル
•スクリプトノードやスタイルノードはパーサーから挿入されていません
ここで、これを例で説明しましょう（完全なコード） ：コードをコピーします