CSS の読み込みと読み込み順序の簡単な分析

この記事は、CSS の読み込みと読み込み順序、および発生した問題の分析を主に紹介し、html、css、js の読み込み順序についても補足的に説明します。友達が必要なので、ぜひ参考にしてください。皆さんのお役に立てれば幸いです。

通常のCSSの読み込み順序

通常、CSSスタイルシートは先頭に配置され、リクエストを減らすために通常はCSSをマージして圧縮します。 現在、CSS は通常次のように読み込まれます:

  <link>


  …content…

これは問題ありませんが、パフォーマンス上の問題がいくつかあります。最適化を続けることができます:

問題:

すべての CSS は 1 つのファイルにマージおよび圧縮され、次の場所で読み込まれます。ページの先頭。おそらく、最初の画面では少しだけ CSS を使用しますが、ヘッダーにはすべての CSS を読み込むため、不当な読み込みとリソースの無駄が発生します。 CSSが非常に大きい場合、Webページの読み込み速度や最初の画面の表示速度に重大な影響を与えます。

考え方を変えてください

単一の CSS 参照をマージして圧縮しない場合、ファイル サイズは小さくなりますが、リクエストの数は多くなります。 2 つを比較検討し、パフォーマンス テストと比較を行った結果、ヘッドにすべての CSS を一度にロードして最初の画面を表示するよりも、次の記述方法のほうが確かに高速であることがわかりました:

  <!-- HTTP/2 push this resource, or inline it, whichever&#39;s faster -->
  <link>
  <header>…</header>
  <link>
  <main>…</main>
  <link>
  <section>…</section>
  <link>
  <section>…</section>
  <link>
  <footer>…</footer>

しかし、パフォーマンスを最適化できる領域はまだあります。

例:

最初の画面にはヘッダーと記事のみが表示され、他のモジュールは最初の画面には表示されません。次に、他のモジュールの 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>

安全のため、ブラウザが JS を禁止しないようにするには、次のこともできます:

<link>

一部のブラウザがハンドラー rel='stylesheet' 属性を再呼び出しするのを避けるために、通常、次の記述をお勧めします:

<link>

互換性を向上させるには、rel=preload、loadCSS、github アドレスを使用できます: https://github.com/filamentgroup/loadCSS

したがって、ブラウザの互換性の問題を考慮せずに、(互換性の問題を考慮して) loadCss を使用します。ここではこれ以上のデモは行いません)。上記のコードを再度最適化しました:

  <link>
  <link>


  
…
  
…
  
…
  
…
  
…

PS: html、css、js の読み込み順序を見てみましょう

    
    
    <link>
    <script></script>

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 サイトの他の関連記事を参照してください。