CSS が初期読み込み時の白い画面の時間に与える影響

外部 CSS ファイルを使用したレンダリング パイプライン

上図では、HTML データの要求から DOM の構築までの間にアイドル時間があり、これがページ レンダリングのボトルネックになる可能性があります。 DOM が構築された後、次のステップはレイアウト ツリーを合成することであるため、レンダリング パイプラインは CSS ファイルがダウンロードされるまで待機します。複合レイアウト ツリーには CSSOM と DOM が必要なので、CSS が読み込まれて CSSOM に解析されるまで待つ必要があります。この場合、CSS は DOM の生成をブロックしません。

CSSOMの役割

• JSにスタイルシートを操作する機能を提供する
• レイアウトツリー合成のための基本的なスタイル情報を提供します

インライン JS と外部 CSS を含むページのレンダリング パイプライン

上図からわかるように、DOM 構築中に JS に遭遇すると、JS が現在の DOM を変更する可能性があるため、構築は停止され、JS が解析されて実行されます。

JS スクリプトを実行する前に、ページに外部 CSS またはインライン CSS が含まれている場合、レンダリング エンジンはそれらを事前に CSSOM に変換する必要があります。JS は CSSOM を変更する機能を持っているため、JS が実行される前に CSSOM にも依存します。つまり、CSS は場合によっては DOM 生成もブロックすることになります。

外部 JS および CSS を含むページのレンダリング パイプライン

要求された HTML データの事前解析プロセス中に、ダウンロードする必要がある外部 JS ファイルと CSS ファイルがあることが検出され、2 つのファイルのダウンロード要求が同時に開始されます。ダウンロード時間は重複せず、最も長い時間に基づいて計算されます。

CSS と JS のどちらが先に到着するかに関係なく、まず CSS ファイルがダウンロードされて CSSOM が生成されるまで待機し、次に JS スクリプトを実行し、最後に DOM とレイアウト ツリーを構築してページを描画する必要があります。

ページの表示と最適化戦略に影響を与える要因

URL を入力してからページが初めて表示されるまでには、次の 3 つの段階があります。

1. リクエストが送信された後、データ送信段階になっても、ページには前のページの内容が引き続き表示されます。
2. データを送信すると、レンダリング プロセスによって空白ページが作成されます。この期間は、解析ホワイト スクリーンと呼ばれます。CSS および JS ファイルの読み込みが完了するのを待機し、CSSOM および DOM を生成してから、レイアウト ツリー、XXX などの手順を合成して、最初のレンダリングの準備をします。
3. 最初のレンダリングが完了すると、完全なページ生成フェーズが開始され、ページが少しずつ描画されます。

2 番目のステージは、HTML の解析、CSS のダウンロード、JavaScript のダウンロード、レイアウト ツリーの生成、ページの描画などの操作を含み、ユーザー エクスペリエンスに最も大きな影響を与えます。

最適化戦略

1. CSS と JS をインライン化し、HTML がダウンロードされた直後にレンダリングを開始します。
2. ファイル サイズを最小限に抑えるために、webpack はコメントを削除し、ファイルを圧縮します。
3. HTML 解析段階で使用する必要のない一部の JS を async または defer でマークします。
4. 大きな CSS ファイルの場合は、メディア クエリを使用して、さまざまな目的の CSS ファイルに分割し、特定のシナリオでのみ読み込むことができます。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。