クリティカル レンダリング パスは、ブラウザが HTML、CSS、JavaScript を画面上のピクセルに変換するために通過する一連のフェーズです。
これらの手順はウェブサイトのパフォーマンスに直接影響するため、このプロセスを最適化したい場合は考慮しなければならないことがあります。
ブラウザは HTTP 呼び出しを通じて HTML を受信します。受信するとすぐに、そのデータを使用して DOM の構築を開始します。
この DOM はノードに基づいて構築されており、各 HTML タグはノードに相当し、HTML 内の子要素も DOM ツリー内の子ノードになります。
ノードの数が多いほど、ページのレンダリング プロセスが完了するまでにかかる時間が長くなります。
DOM にはページのコンテンツに関するすべての情報が含まれていますが、CSSOM にはそのコンテンツがどのように表示されるかに関するすべての情報が含まれています。
CSS 処理によりレンダリングがブロックされます。つまり、完全に処理されるまでは、以降の手順を続行して、最終的にコンテンツを画面に表示することはできません。これは、CSS ファイル内で数行上に適用されたスタイルが上書きされる場合があるためです。
DOM と CSSOM の準備ができたら、これらを結合して「レンダー ツリー」を作成します。これには、画面に表示される要素に関する必要な情報がすべて含まれます。このツリーでは、次の要素が表示されます。なし。およびその子孫、または
タグ内にあるすべてのもの。 レイアウト指定しない場合、要素はデフォルトで親の幅の 100% になります。ブラウザによっては固定幅です。このため、この要素を に含める必要があります。私たちの文書から:
<head>
<meta name="viewport" content="width=device-width" />
</head>
ノードの数が増えると、このプロセスが完了するまでに時間がかかるため、レイアウトは Web サイトのパフォーマンスに影響を与える可能性があります。レイアウト プロセスが遅いと、最初のページの読み込みが遅くなるだけでなく、一部のアニメーションの見栄えが悪くなります。
画面上のピクセルのペイントは、レンダリング プロセスの最後のステップです。最初のロード (onload) の後、変更が加えられたページの領域のみが再描画されるため、これは簡単な手順です。ブラウザは、このプロセスを不必要に実行しないようにすでに最適化されています。
このプロセスはさまざまな方法で最適化できますが、それぞれのケースは固有であり、最終的に重要なのは、プロジェクトに最適な対策を適用することです。
ブラウザは、ページにとって重要な画像、スタイル、スクリプトなどのリソースをできるだけ早くダウンロードするという考え方なので、これらの要素を スクリプトや小さなスタイルであっても、インラインタグに入れることができます。 一方、ロードしているものが DOM の一部の要素を変更するスクリプトである場合は、すべてのノードを含むツリーが構築された後にそれをロードするという考え方になります。このような場合には、body タグの最後にそのスクリプトをロードする必要があります。 DOM を変更しないスクリプトの読み込みを延期することは、Web サイトの読み込み時間を短縮するために非常に良い方法です。これは、「async」属性と「defer」属性を使用して実行できます。 スクリプトを非同期として設定すると、このスクリプトはダウンロードされて独立して実行されるため、レンダリング プロセスはブロックされず、実行時間は任意です。 defer 属性を持つスクリプトは非同期でダウンロードされますが、ドキュメント内での順序が尊重されます。また、小さなスクリプトを大きなスクリプトの後に実行するかどうかを制御する良い方法です。 上記の例では、3 つのスクリプトが非同期的にダウンロードされます。最後のスクリプトの方が小さいため、最初にダウンロードされると想定します。最初のスクリプトは完全に独立してダウンロードおよび実行され、他の要素の準備が完了するのを待ったり、レンダリング プロセスをブロックしたりしません。いずれの場合も、defer 属性は順序を尊重するため、最後のスクリプトは 2 番目のスクリプトの後に実行されます。 画面上で必要なスタイルのみを読み込むことが考えられるため、パフォーマンスの最適化に役立つテクニックとしては、携帯電話に適用するかどうかに応じてページ スタイルを異なるファイルに分割することが考えられます。 、タブレット、デスクトップなど。 HTML では、これらのファイルはメディア クエリとともに読み込まれ、不必要なスタイルの読み込みが回避されます。 ばかげているように思えるかもしれませんが、空白やコメントなどを削除するとブラウザがレンダー ツリーを構築するために必要な作業を軽減できるため、ファイルを縮小するとページのパフォーマンスが大幅に向上します。 これらは、このプロセスを最適化するために留意すべきいくつかの点にすぎません。これを念頭に置くと、クリティカル レンダリング パスを最適化するようにすでに設計された高品質のコードを作成できる方が現実的です。 以上がクリティカル レンダリング パスとは何か、そしてそれを最適化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
<head>
<meta name="viewport" content="width=device-width" />
</head>
ログイン後にコピーログイン後にコピーログイン後にコピー
<head>
<style>
.foo {
color: red;
}
</style>
</head>
ログイン後にコピー
スクリプトの読み込みを延期する
<html>
<body>
<!-- My content -->
<script src="./path/to/my/script.js"></script>
</body>
</html>
ログイン後にコピー
メディアクエリによるスタイルの分離
<head>
<meta name="viewport" content="width=device-width" />
</head>
ログイン後にコピーログイン後にコピーログイン後にコピー
リソースを縮小する
結論
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
