jsとcssのブロッキング問題の詳細な分析

DOMContentLoadedとロード

まず、その後の分析に役立つ 2 つのイベントを理解しましょう。

ロードイベント: ロードは、完全に読み込まれたページを検出する場合にのみ使用してください。ロードイベントは、リソースとその依存リソースの読み込みが完了したときに発生します。つまり、ロードイベントは、ページの HTML、CSS、JS、画像、その他のリソースが読み込まれた後にのみトリガーされます。

DOMContentLoaded イベント: DOMContentLoaded イベントは、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに、最初の HTML ドキュメントが完全に読み込まれて解析されたときにトリガーされます。つまり、DOM ツリーが構築されたときに DOMContentLoaded イベントがトリガーされます。

js ブロッキングとは何ですか?

JS は実行中に DOM を操作し、リフローと再描画を行う可能性があるため、GUI レンダリングスレッドと JS エンジンスレッドは相互に排他的です。

HTML を解析するときにスクリプトタグが検出されると、レンダリングスレッドはレンダリングプロセスを一時停止し、制御を JS エンジンに渡します。インライン js コードは直接実行されます。外部 js ファイルの場合は、js ファイルをダウンロードし、ダウンロード完了後に実行する必要があります。 JS エンジンの実行が終了すると、ブラウザはレンダリングスレッドに制御を返し、DOM の解析を続行します。

したがって、js は DOM ツリーの構築をブロックします。

それで、ページの表示がブロックされるのでしょうか?次のコードでテストしてみましょう。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta http-equiv="X-UA-compatible" content="IE=edge">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>ドキュメント</title>
</head>
<本文>
  <div>こんにちは世界</div>
  <スクリプト>
    デバッガ
  </スクリプト>
  <div>こんにちは世界2</div>
</本文>
</html>

このページの DOMContentLoaded は 2.23 秒で発生しており、js が DOM ツリーの構築をブロックしていることがわかります。ただし、hello world はほぼ瞬時にページに表示されるため、js はそれ以前の DOM 要素のレンダリングをブロックしないことがわかります。

より良いユーザーエクスペリエンスを実現するために、最新のブラウザーレンダリングエンジンは、コンテンツをできるだけ早く画面に表示しようとします。レンダリングツリーをレイアウトする前に、すべての DOM 解析が完了するまで待機しません。代わりに、js ブロッキングが発生すると、すでに構築された DOM 要素が画面にレンダリングされ、白い画面の時間が短縮されます。

そのため、前のページのレンダリングに影響を与えないように、スクリプトタグを body タグの下部に配置します。

CSS ブロッキングとは何ですか?

HTML を解析するときにリンクタグまたはスタイルタグに遭遇すると、スタイルを計算して CSSOM を構築します。

CSS は DOM ツリーの構築をブロックしませんが、ページの表示をブロックします。まだ例を使ってテストしてみましょう:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta http-equiv="X-UA-compatible" content="IE=edge">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>ドキュメント</title>
  <link rel="スタイルシート" type="text/css" href="https://h5.sinaimg.cn/m/weibo-pro/css/chunk-vendors.d6cac585.css">
</head>
<本文>
  <div class="woo-spinner-filled">こんにちは世界</div>
  <div>こんにちは世界2</div>
</本文>
</html>

外部 CSS ファイルを使用して Slow 3G を開き、より遅いネットワーク速度をシミュレートします。DOMContentLoaded イベントがトリガーされるまでに 30 ミリ秒しかかからないことがわかります。この時点ではページはまだ空白で、loaded イベントが発生してから約 2.92 秒経過するまでコンテンツはページに表示されません。

その理由は、ブラウザは CSSOM の構築中に処理されたコンテンツを一切レンダリングしないからです。 DOM が解析されていても、CSSOM が構築されない限り、ページにはコンテンツが表示されません。

CSSOM はリンクタグまたはスタイルタグに遭遇した場合にのみ構築されるため、リンクタグの前に DOM 要素があると、CSS の読み込み時にブロックが発生します。

<本文>
  <div class="woo-spinner-filled">こんにちは世界</div>
  <link rel="スタイルシート" type="text/css" href="https://h5.sinaimg.cn/m/weibo-pro/css/chunk-vendors.d6cac585.css">
  <div>こんにちは世界2</div>
</本文>

そうすると、ページがちらつくという問題が発生します。CSS が読み込まれる前に、ブラウザはデフォルトのスタイルに従って <div class="woo-spinner-filled">hello world</div> をレンダリングします。CSS が読み込まれると、div の新しいスタイルが計算され、再レンダリングされるため、ちらつきが発生します。

ページのちらつきを避けるために、リンクタグは通常、ヘッダーに配置されます。

CSS は後続の js 実行をブロックしますか?答えはイエスです！

JS は変更に関するもので、コンテンツ、スタイル、ユーザー操作への応答など、Web ページのあらゆる側面を変更するのに役立ちます。変更のこれらの「すべての側面」は、本質的には DOM と CSSDOM に対する変更です。 CSSDOM 内の要素のスタイルが JS でアクセスされる場合、JS スクリプトの実行を続行する前に、スタイルがダウンロードされるまで待つ必要があります。

次の例を実行すると、CSS が読み込まれた後にのみコンソールに「this is a test」と表示されることがわかります。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta http-equiv="X-UA-compatible" content="IE=edge">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>ドキュメント</title>
  <link rel="スタイルシート" type="text/css" href="https://h5.sinaimg.cn/m/weibo-pro/css/chunk-vendors.d6cac585.css">
</head>
<本文>
  <div class="woo-spinner-filled">こんにちは世界</div>
  <div>こんにちは世界2</div>
  <スクリプト>
    console.log('これはテストです')
  </スクリプト>
</本文>
</html>

最適化

インライン JavaScript と CSS を使用して、HTML ファイルを取得した直後にレンダリングプロセスを開始できるようにします。

すべての状況がインライン化に適しているわけではないので、無駄なコードを削除したり、webpack などの構築ツールを使用して CSS ファイルと JavaScript ファイルのサイズを圧縮したり、CDN を有効にしてファイルのダウンロードを高速化したりして、ファイルサイズを縮小することもできます。

大きな CSS ファイルの場合は、メディアクエリ属性を使用して、さまざまな目的に合わせて複数の CSS ファイルに分割し、特定の CSS ファイルが特定のシナリオでのみ読み込まれるようにすることができます。

JavaScript ファイルに DOM 関連のコードがない場合、コードに async または defer をマークすることで、JavaScript スクリプトを非同期で読み込むように設定できます。

<script src="index.js"></script>
// ブラウザは、他の処理を実行する前に、index.js が読み込まれて実行されるまで待機する必要があります。

<スクリプト非同期src="index.js"></スクリプト>
//index.js の読み込みは非同期であり、読み込み中にブラウザが他の操作を行うことをブロックしません。
// 読み込みが完了すると、JS スクリプトがすぐに実行されます。

<script を延期 src="index.js"></script>
//JS の読み込みは非同期であり、実行は延期されます。
//defer でマークされたスクリプト ファイルは、ドキュメント全体が解析され、実行されてから DOMContentLoaded イベントがトリガーされるまで待機します。

要約する

js と css のブロッキング問題についての記事はこれで終わりです。より関連性の高い js と css のブロッキングコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: