CSSがページのレンダリングをブロックするかどうかについての簡単な説明

おそらく誰もが js の実行によって DOM ツリーの解析とレンダリングがブロックされることを知っていると思いますが、CSS の読み込みによって DOM ツリーの解析とレンダリングがブロックされるのでしょうか?次は一緒に分析してみましょう。

原理分析

では、なぜ上記のような現象が起こるのでしょうか?ブラウザのレンダリングプロセスから分析してみましょう。ブラウザによって使用するカーネルが異なるため、レンダリングプロセスも異なります。現在、2つの主な

WebKit レンダリングプロセス

Gecko レンダリングプロセス

上記の 2 つのフローチャートから、ブラウザのレンダリングプロセスは次のようになることがわかります。

HTMLはファイルを解析してDOMツリーを生成し、CSSファイルを解析してCSSOMツリーを生成します。
DomツリーとCSSOMツリーを組み合わせてレンダリングツリーを生成する
レンダリングはレンダーツリーに従って行われ、ピクセルが画面上にレンダリングされます。

このプロセスからわかることは

DOM 解析と CSS 解析は 2 つの並列プロセスであるため、CSS の読み込みによって DOM 解析がブロックされない理由もこれによって説明されます。
ただし、レンダリングツリーは DOM ツリーと CSSOM ツリーに依存しているため、レンダリングを開始する前に、CSSOM ツリーが構築される、つまり CSS リソースが読み込まれる (または CSS リソースの読み込みに失敗する) まで待機する必要があります。したがって、CSS の読み込みにより Dom レンダリングがブロックされます。
js は以前の Dom ノードと css スタイルを操作する可能性があるため、ブラウザは html 内の css と js の順序を維持します。そのため、後続の js が実行される前にスタイルシートが読み込まれ、実行されます。したがって、CSS は後続の js の実行をブロックします。

DOMコンテンツが読み込まれました

ブラウザの場合、ページの読み込みには主に 2 つのイベントがあります。1 つは DOMContentLoaded で、もう 1 つは onLoad です。 onLoad については特に言うことはありません。ページのすべてのリソースが読み込まれた後にのみトリガーされます。これらのリソースには、CSS、JS、画像、ビデオなどが含まれます。

DOMContentLoaded は、その名前が示すように、ページのコンテンツが解析されるときにトリガーされます。上で説明したように、css は Dom のレンダリングと js の実行をブロックし、js は Dom の解析をブロックします。すると、次のような仮定を立てることができる。

ページに CSS のみが存在する場合、または JS が CSS の前に配置されている場合、DomContentLoaded は CSS が読み込まれるまで待機する必要はありません。
ページに CSS と JS の両方があり、JS が CSS の後ろにある場合、DomContentLoaded は CSS と JS の両方が読み込まれるまで待機してからトリガーされる必要があります。

まず最初のケースをテストしてみましょう:

<!DOCTYPE html>
<html lang="ja">
 <ヘッド>
 <title>CSS ブロッキング</title>
 <メタ文字セット="UTF-8">
 <meta name="viewport" content="width=デバイス幅、初期スケール=1">
 <スクリプト>
 document.addEventListener('DOMContentLoaded', 関数() {
 console.log('DOMコンテンツが読み込まれました');
 })![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d30219afd9e84bc99875991b7d284435~tplv-k3u1fbpfcp-zoom-1.image)

![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/87519598e6484ec38db8daed23f586c9~tplv-k3u1fbpfcp-zoom-1.image)
 </スクリプト>
 <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="スタイルシート">
 </head>
 <本文>
 </本文>
</html>

実験結果は次のとおりです。アニメーション画像から、CSS がロードされる前に DOMContentLoaded イベントがトリガーされたことがわかります。 CSS の背後に js コードがないためです。

次に、2 番目のケースをテストします。これは非常に簡単です。CSS の後に 1 行のコードを追加するだけです。

<!DOCTYPE html>
<html lang="ja">
 <ヘッド>
 <title>CSS ブロッキング</title>
 <メタ文字セット="UTF-8">
 <meta name="viewport" content="width=デバイス幅、初期スケール=1">
 <スクリプト>
 document.addEventListener('DOMContentLoaded', 関数() {
 console.log('DOMコンテンツが読み込まれました');
 })
 </スクリプト>
 <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="スタイルシート">
 <スクリプト>
 console.log('もう私の番ですか?');
 </スクリプト>
 </head>
 <本文>
 </本文>
</html>

DOMContentLoaded イベントは、CSS の読み込みが完了した後にのみトリガーされることがわかります。したがって、次のように結論付けることができます。

ページに CSS と JS の両方があり、JS が CSS の後ろにある場合、CSS が読み込まれた後に DOMContentLoaded イベントが実行されます。
その他の場合、DOMContentLoaded は CSS の読み込みを待機せず、DOMContentLoaded イベントは画像やビデオなどの他のリソースの読み込みを待機しません。

要約する

上記から、次のような結論を導き出すことができます。

CSSの読み込みはDOMツリーの解析をブロックしません
CSSの読み込みによりDOMツリーのレンダリングがブロックされます
CSSの読み込みにより、後続のJSステートメントの実行がブロックされます。

したがって、ユーザーが長時間白い画面を目にすることを避けるためには、次の方法などを使用して、CSS の読み込み速度を可能な限り上げる必要があります。

CDN を使用する (CDN はネットワーク状況に基づいてリソースを提供するために、キャッシュされたコンテンツを持つ最も近いノードを選択するため、読み込み時間が短縮されます)
CSS を圧縮します (webpack、gulp などの多くのパッケージングツールを使用するか、gzip 圧縮をオンにすることができます)
キャッシュを適切に使用してください (cache-control、expires、E-tag を設定することはすべて良いことですが、ファイルが更新された後はキャッシュの影響を避ける必要があることに注意してください。1 つの解決策は、ファイル名の後にバージョン番号を追加することです)
http リクエストの数を減らし、複数の CSS ファイルを結合するか、単にインラインで記述します (インラインスタイルの欠点の 1 つは、キャッシュできないことです)。

CSS がページレンダリングをブロックするかどうかについてのこの記事はこれで終わりです。CSS がページレンダリングをブロックすることについての詳細は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: 私の CSS フレームワーク - base.css (ブラウザのデフォルトスタイルをリセット)

>>: Vueの監視プロパティの詳細