おそらく誰もが js の実行によって DOM ツリーの解析とレンダリングがブロックされることを知っていると思いますが、CSS の読み込みによって DOM ツリーの解析とレンダリングがブロックされるのでしょうか?次に、CSS の読み込みが DOM ツリーの解析とレンダリングに与える影響をテストします。 このテストを完了するには、まずChromeを使用してダウンロード速度を設定する方法を学びましょう。 \1. Chromeコンソールを開く(F12キーを押す)と、次の図が表示されます。フォーカスは赤い円を描いた部分です。 赤い円 (スロットルなし) をクリックすると、次の画像が表示されます。GPRS オプションを選択します。 \2. 赤い丸(スロットリングなし)をクリックすると、次の画像が表示されます。GPRSオプションを選択します。 この方法では、リソースのダウンロード速度制限は 20kb/s に制限されます。それでは、本題に入りましょう。 3. このようにして、リソースのダウンロード速度の上限は 20kb/s に制限されます。それでは、本題に入りましょう。 CSS の読み込みにより、DOM ツリーの解析とレンダリングがブロックされますか? コードについて話しましょう: <!DOCTYPE html> <html lang="ja"> <ヘッド> <title>CSS ブロッキング</title> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1"> <スタイル> h1 { 色: 赤 !重要 } </スタイル> <スクリプト> 関数h(){ コンソールログ(document.querySelectorAll('h1')) } タイムアウトを設定します(h, 0) </スクリプト> <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="スタイルシート"> </head> <本文> <h1>これは赤です</h1> </本文> </html> 仮定: CSS の読み込みにより、DOM ツリーの解析とレンダリングがブロックされる 前提: bootstrap.css が読み込まれる前は、次のコンテンツは解析およびレンダリングされないため、最初に表示されるのは白い画面であり、h1 は表示されません。そして、この時点で console.log の結果は空の配列になるはずです。 実際の結果:以下の通り CSS は DOM ツリーの解析をブロックしますか? 上の図から、CSSが読み込まれていない場合、h1は表示されませんが、コンソール出力は次のようになります。 この時点で、DOM ツリーは少なくとも h1 まで解析されていますが、CSS はまだロードされていないことがわかります。つまり、CSS は DOM ツリーの解析をブロックしません。 CSS の読み込みにより DOM ツリーのレンダリングがブロックされますか? 上の画像から、CSS が読み込まれていない場合、ページには白い画面が表示されることもわかります。赤いフォントは、CSS が読み込まれるまで表示されません。つまり、次のコンテンツは解析されますが、レンダリングされません。したがって、CSS の読み込みにより DOM ツリーのレンダリングがブロックされます。 このメカニズムに対する私の個人的な評価 実際、これはブラウザの最適化メカニズムでもあるのではないかと思います。 CSS をロードすると、次の DOM ノードのスタイルが変更される可能性があるためです。CSS のロードによって DOM ツリーのレンダリングがブロックされない場合は、CSS がロードされた後に DOM ツリーを再描画またはリフローする必要があり、不要な損失が発生する可能性があります。したがって、まず DOM ツリーの構造を解析し、実行可能な作業を実行し、CSS が読み込まれた後、最終的なスタイルに従って DOM ツリーをレンダリングします。このアプローチは、パフォーマンスの点で確かに優れています。 CSS の読み込みにより JS の実行がブロックされますか? 上記の推論から、CSS の読み込みは DOM ツリーの解析をブロックしないが、DOM ツリーのレンダリングをブロックすると結論付けることができます。それで、CSS の読み込みは JS の実行をブロックするのでしょうか? もう一度、コードを通じてこれを確認します。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <title>CSS ブロッキング</title> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1"> <スクリプト> console.log('CSS 以前') var startDate = 新しい日付() </スクリプト> <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="スタイルシート"> </head> <本文> <h1>これは赤です</h1> <スクリプト> var endDate = 新しい日付() console.log('cssの後') console.log('経過時間' + (endDate - startDate) + 'ms') </スクリプト> </本文> </html> 仮定: CSSの読み込みにより、後続のJSの実行がブロックされる 期待される結果: リンクの後の js コードは、CSS が読み込まれた後に実行される必要があります。 実際の結果: 上の図から、CSS 読み込みステートメントの前の js コードは最初に実行されますが、CSS 読み込みステートメントの後のコードは CSS が読み込まれるまで実行されないことがわかります。これは、CSS の読み込みによって後続の JS ステートメントの実行がブロックされることも示しています。詳細な結果については次の図を参照してください (CSS の読み込みには 5600 ミリ秒以上かかりました)。 結論は 上記から、次のような結論を導き出すことができます。
したがって、ユーザーが長時間白い画面を目にすることを避けるためには、次の方法などを使用して、CSS の読み込み速度を可能な限り上げる必要があります。
原理分析 では、なぜ上記のような現象が起こるのでしょうか?ブラウザのレンダリングプロセスから分析してみましょう。 ブラウザによって使用するカーネルが異なるため、レンダリング プロセスも異なります。現在、主なものは 2 つあります。 WebKit レンダリングプロセス Gecko レンダリングプロセス 上記の 2 つのフローチャートから、ブラウザのレンダリング プロセスは次のようになることがわかります。 HTML ファイルを解析して DOM ツリーを生成し、CSS ファイルを解析して CSSOM ツリーを生成します。Dom ツリーと CSSOM ツリーを組み合わせてレンダリング ツリーを生成します。レンダリング ツリーに従ってレンダリングおよび描画し、ピクセルを画面にレンダリングします。 このプロセスからわかることは
DOMコンテンツが読み込まれました ブラウザの場合、ページの読み込みには主に 2 つのイベントがあります。1 つは DOMContentLoaded で、もう 1 つは onLoad です。 onLoad については特に言うことはありません。ページのすべてのリソースが読み込まれた後にのみトリガーされます。これらのリソースには、CSS、JS、画像、ビデオなどが含まれます。 DOMContentLoaded は、その名前が示すように、ページのコンテンツが解析されるときにトリガーされます。上で説明したように、css は Dom のレンダリングと js の実行をブロックし、js は Dom の解析をブロックします。すると、次のような仮定を立てることができる。
まず最初のケースをテストしてみましょう: <!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="スタイルシート"> </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 イベントは画像やビデオなどの他のリソースの読み込みを待機しません。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
WeChatアプレットuniappは左スワイプで削除効果を実現成果を達成する1. スワイプしてリス...
序文ブロガーが使用しているサーバーは Alibaba Cloud から購入したものです。実際、Ali...
データシート /* Navicat SQLite データ転送 ソースサーバー: school ソース...
この記事の例では、セカンダリメニュー効果を実現するためのJSの具体的なコードを参考までに共有していま...
この記事では、画像を読み込むためのJavaScriptキャンバスの具体的なコードを参考までに紹介しま...
序文従来のWEBレイアウトに沿うため、すべてヘッダーとフッターモードの左・中央・右レイアウトで書かれ...
MySQL でデータを削除するには 2 つの方法があります。切り詰めは大まかな伐採の一種である削除は...
開発を行う際に、次のような状況に遭遇することがよくあります。 a.swf が Web ページに追加さ...
導入Docker-Compose プロジェクトは、Docker コンテナ クラスターの迅速なオーケス...
1. vue-cli がプロジェクト パッケージを作成した後にページが空白になる問題の解決方法コマン...
HTML と CSS を含む JD.com のホームページの静的ページ効果を 3 日間で完成させます...
この記事では、主に js を使用して画像をモザイク化する方法の例を紹介し、次のように共有します。効果...
js では、ログインまたは登録を確認する前に、ユーザーが特定の契約書を読むように設定します (使用...
以下のように表示されます。 bb_sbからa1、a2、a1+a2 a、a1*a2 b、a1*1.0/...
この記事では、MySQL 8.0.16圧縮パッケージのインストールと設定方法を参考までに紹介します。...