CSS の読み込みと読み込み順序の簡単な分析
この記事は、CSS の読み込みと読み込み順序、および発生した問題の分析を主に紹介し、html、css、js の読み込み順序についても補足的に説明します。友達が必要なので、ぜひ参考にしてください。皆さんのお役に立てれば幸いです。
通常のCSSの読み込み順序
通常、CSSスタイルシートは先頭に配置され、リクエストを減らすために通常はCSSをマージして圧縮します。 現在、CSS は通常次のように読み込まれます:
<head> <link rel="stylesheet" href="/all-of-my-styles.css"> </head> <body> …content… </body>
これは問題ありませんが、パフォーマンス上の問題がいくつかあります。最適化を続けることができます:
問題:
すべての CSS は 1 つのファイルにマージおよび圧縮され、次の場所で読み込まれます。ページの先頭。おそらく、最初の画面では少しだけ CSS を使用しますが、ヘッダーにはすべての CSS を読み込むため、不当な読み込みとリソースの無駄が発生します。 CSSが非常に大きい場合、Webページの読み込み速度や最初の画面の表示速度に重大な影響を与えます。
考え方を変えてください
単一の CSS 参照をマージして圧縮しない場合、ファイル サイズは小さくなりますが、リクエストの数は多くなります。 2 つを比較検討し、パフォーマンス テストと比較を行った結果、ヘッドにすべての CSS を一度にロードして最初の画面を表示するよりも、次の記述方法のほうが確かに高速であることがわかりました:
<head> </head> <body> <!-- HTTP/2 push this resource, or inline it, whichever's faster --> <link rel="stylesheet" href="/site-header.css"> <header>…</header> <link rel="stylesheet" href="/article.css"> <main>…</main> <link rel="stylesheet" href="/comment.css"> <section class="comments">…</section> <link rel="stylesheet" href="/about-me.css"> <section class="about-me">…</section> <link rel="stylesheet" href="/site-footer.css"> <footer>…</footer> </body>
しかし、パフォーマンスを最適化できる領域はまだあります。
例:
最初の画面にはヘッダーと記事のみが表示され、他のモジュールは最初の画面には表示されません。次に、他のモジュールの CSS を完全に非同期でロードできます。非同期でロードするにはどうすればよいですか?
以下を参照してください
loadCSS とプリロード
プリロードについては、誰もが読むことができる 2 つの記事を宣伝します:
1. rel="preload" を通じてコンテンツをプリロードします: https://developer.mozilla.org/zh - CN/docs/Web/HTML/Preloading_content
2. w3 ドキュメントのプリロード: https://www.w3.org/TR/preload/
最初の画面にロードされない一部の CSS については、次のように記述できます。以下:
<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.rel='stylesheet'">
安全のため、ブラウザが JS を禁止しないようにするには、次のこともできます:
<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.rel='stylesheet'">
一部のブラウザがハンドラー rel='stylesheet' 属性を再呼び出しするのを避けるために、通常、次の記述をお勧めします:
<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="path/to/haorooms.css"></noscript>
互換性を向上させるには、rel=preload、loadCSS、github アドレスを使用できます: https://github.com/filamentgroup/loadCSS
したがって、ブラウザの互換性の問題を考慮せずに、(互換性の問題を考慮して) loadCss を使用します。ここではこれ以上のデモは行いません)。上記のコードを再度最適化しました:
<head> <link rel="stylesheet" href="/首屏加载css.css"> <link rel="preload" href="/不是首屏加载的css.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> </head> <body> <header>…</header> <main>…</main> <section class="comments">…</section> <section class="about-me">…</section> <footer>…</footer> </body>
PS: html、css、js の読み込み順序を見てみましょう
<head lang="en"> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/*.css"> <script src="js/*.js></script> </head>
DOM ドキュメントの読み込み順序は上から下です;
1. DOM link タグにロードされた css ファイルは、DOM のロードと並行してロードされます。つまり、css がロードされ、css スタイルまたは img が検出されると、DOM はロードおよびビルドを継続します。プロセス内でリクエストがサーバーに送信され、リソースが返された後、それを dom 内の対応する場所に追加します。
js ファイルは読み込まれません。 DOM と並行して、js ファイル全体がロードされるまで待つ必要があります。js スクリプト ファイルが大きすぎると、ブラウザ ページが「一時停止」したように見えることがあります。 「ブロック効果」; それは非常に悪いユーザーエクスペリエンスにつながります
そして、この機能が $(document).ready(function(){}) または (function(){}) または window.onload が必要な理由です。 js ファイルの先頭、つまり DOM ドキュメントがロードされた後にのみ js ファイルが実行されるため、DOM ノードが見つからないなどの問題は発生しません。他のリソースの読み込みでは、js が DOM ツリーを変更するのを防ぐために、ブラウザーが DOM ツリーを再構築する必要があります。
前提として、js は外部スクリプトです。これにより、js と DOM が並行して読み込まれます。そのため、ブロックはありません。これをタグに追加します。属性は、js ファイルが非同期でロードおよび実行されることをブラウザーに伝えます。つまり、js ファイルのロード順序は保証されませんが、DOM のロードと並行して実行されます。効果; defer 属性と async 属性を同時に使用する場合、defer 属性は無効になります。 読み込みの競合が発生しないように、body タグの後に scirpt タグを置くことができます。 関連する推奨事項: html、css、および js ファイルのロード順序と実行 ページのロード順序問題_html/css_WEB-ITnose
Java のクラスのロード順序の実行結果の詳細な紹介
以上がCSS の読み込みと読み込み順序の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7487
15
1377
52
77
11
19
39
ブートストラップボタンの使用方法
Apr 07, 2025 pm 03:09 PM
ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します
ブートストラップに写真を挿入する方法
Apr 07, 2025 pm 03:30 PM
ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
ブートストラップにスプリットラインを書く方法
Apr 07, 2025 pm 03:12 PM
ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。
ブートストラップのフレームワークをセットアップする方法
Apr 07, 2025 pm 03:27 PM
Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
ブートストラップの日付を表示する方法
Apr 07, 2025 pm 03:03 PM
回答：ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順：ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
ブートストラップの日付を確認する方法
Apr 07, 2025 pm 03:06 PM
ブートストラップの日付を確認するには、次の手順に従ってください。必要なスクリプトとスタイルを紹介します。日付セレクターコンポーネントを初期化します。 Data-BV-Date属性を設定して、検証を有効にします。検証ルール（日付形式、エラーメッセージなどなど）を構成します。ブートストラップ検証フレームワークを統合し、フォームが送信されたときに日付入力を自動的に検証します。
