ホームページ > 記事 > ウェブフロントエンド > CSS の読み込みと読み込み順序の簡単な分析

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

小云云オリジナル: 2017-12-26 09:20:032298ブラウズ

この記事は、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&#39;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=&#39;stylesheet&#39;">

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

<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.rel=&#39;stylesheet&#39;">

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

<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.onload=null;this.rel=&#39;stylesheet&#39;">
<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=&#39;stylesheet&#39;">
</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 タグを置くことができます。

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

関連記事