今後のCSSファイル読み込み方法_html/css_WEB-ITnose-htmlチュートリアル-php.cn

Chrome はの読み込み方法を変更する予定ですが、これはリンクがに表示されるときに非常に明白になります。ブリンク開発の記事では、その影響とパフォーマンスが不明瞭なので、ここでさらに詳しく説明したいと思います。

CSS をロードする現在の方法

<head>  <link rel="stylesheet" href="/all-of-my-styles.css"></head><body>  …content…</body>

ログイン後にコピー

CSS はレンダリングをブロックします。ユーザーは all-of-my-styles.css が完全にロードされるまで待つ必要があります。そうしないと、画面が常に白になります。

Web サイトの CSS スタイルが 1 つまたは 2 つのファイルに保存されるのはごく普通のことです。つまり、ユーザーは現在のページに適用されない多くの追加のスタイルルールを読み込む必要があります。 Web サイトには多くの「コンポーネント」を含む多くの種類のページが含まれるため、CSS ファイルをコンポーネントレベルで整理すると、HTTP/1 プロトコルのパフォーマンスに影響します。

これは SPDY と HTTP/2 には当てはまりません。多くの小規模リソースは小さなオーバーヘッドで生成でき、また個別にキャッシュできます。

<head>  <link rel="stylesheet" href="/site-header.css">  <link rel="stylesheet" href="/article.css">  <link rel="stylesheet" href="/comment.css">  <link rel="stylesheet" href="/about-me.css">  <link rel="stylesheet" href="/site-footer.css"></head><body>  …content…</body>

ログイン後にコピー

これにより、冗長な読み込みの問題は解決されますが、ストリーミングを防ぐためにを出力するときにページに何が含まれるかを最初に知る必要があります。さらに、ブラウザはページコンテンツをレンダリングする前にすべての CSS ファイルをダウンロードする必要があります。 /site-footer.css ファイルの読み込みが遅いと、ページ上のすべてのコンテンツのレンダリングに遅れが生じる可能性があります。

デモを見る

現在 CSS をロードする最も高度な方法

<head>  <script>    // https://github.com/filamentgroup/loadCSS    !function(e){"use strict"    var n=function(n,t,o){function i(e){return f.body?e():void setTimeout(function(){i(e)})}var d,r,a,l,f=e.document,s=f.createElement("link"),u=o||"all"    return t?d=t:(r=(f.body||f.getElementsByTagName("head")[0]).childNodes,d=r[r.length-1]),a=f.styleSheets,s.rel="stylesheet",s.href=n,s.media="only x",i(function(){d.parentNode.insertBefore(s,t?d:d.nextSibling)}),l=function(e){for(var n=s.href,t=a.length;t--;)if(a[t].href===n)return e()    setTimeout(function(){l(e)})},s.addEventListener&&s.addEventListener("load",function(){this.media=u}),s.onloadcssdefined=l,l(function(){s.media!==u&&(s.media=u)}),s}    "undefined"!=typeof exports?exports.loadCSS=n:e.loadCSS=n}("undefined"!=typeof global?global:this)  </script>  <style>    /* The styles for the site header, plus: */    .main-article,    .comments,    .about-me,    footer {      display: none;    }  </style>  <script>    loadCSS("/the-rest-of-the-styles.css");  </script></head><body></body>

ログイン後にコピー

上記のコードには、高速な初期レンダリングを実行し、スタイルをロードしていないコンテンツを非表示にするインラインスタイルがいくつかあります。次に、JavaScript を使用して CSS の残りの部分を非同期的に読み込みます。ロードされた残りの CSS は、 .main-article の display: none をオーバーライドします。

この方法は、初期レンダリングを高速化するためにパフォーマンスの専門家によって推奨されており、それは理にかなっています:

デモを見る

実際の世界では、私はこの wiki をオフラインで作成しましたが、それは機能します:

3G ネットワークでは、初期レンダリングは 0.6 秒速くなります。完全な結果比較前の結果比較後。

ただし、いくつかの欠点があります:

(小規模な) JavaScript ライブラリが必要です

残念ながら、これは WebKit の実装が原因です。ページにが追加されると、スタイルシートが JavaScript 経由でロードされた場合でも、WebKit はスタイルシートがロードされるまでレンダリングをブロックします。

Firefox および IE/Edge では、JS 経由でのスタイルシートの読み込みは完全に非同期です。 Chrome の安定版では現在も WebKit が使用されていますが、Chrome の Canary 版では Firefox/Edge と同じ方式に切り替えられました。

読み込みは 2 段階に制限されています

上記のパターンでは、インライン CSS は、display:none を使用してスタイルのないコンテンツを非表示にし、CSS を非同期的に読み込んで問題を解決します。 2 つ以上の CSS ファイルがある場合、順番に読み込まれない可能性があり、読み込みプロセス中にコンテンツが文字化けする原因になります:

デモを見る

コンテンツとポップアップが文字化けするのは非常に問題ですユーザーエクスペリエンス。

ロードは 2 段階に制限されているため、最初のレンダリングで何をロードするか、その後に何をロードするかを選択する必要があります。もちろん、「目立つ」コンテンツをすばやくレンダリングする必要がありますが、「ページレイアウト」はウィンドウに依存します。非常に難しいのですが、あらゆる状況に適したソリューションを選択する必要があります。

更新: 物事を複雑にしたい場合は、CSS カスタムプロパティを使用してレンダリング依存関係ツリーのようなものを構築できます。カスタムプロパティを使用して 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>

ログイン後にコピー

この方法は、各に対して、スタイルシートをロードするときに、後続のコンテンツのレンダリングをブロックしますが、レンダリングされる前のコンテンツは許可します。最初のレンダリング。スタイルシートは並行してロードされますが、順次適用されます。このように、はに似ています。

上記の Web サイトのタイトルヘッダー、本文コンテンツ記事、およびフッターが最初に読み込まれ、その後他の部分がハングした場合のページ結果を見てみましょう:

タイトル: レンダリング
テキスト: レンダリング
コメント: いいえレンダリング、その前の CSS はロードされていません (/comment.css)
自己紹介: レンダリングはありません、その前の CSS はロードされていません (/comment.css)
フッター: レンダリングはありません、その前の CSS はロードされていますロードされていません CSS はまだロードされていません ( /comment.css )。独自の CSS はロードされていますが、ブロックされています

これは順次レンダリングされるページです。どのコンテンツが「明白」であるかを決める必要はありません。コンポーネントがページ上でインスタンス化される前に、コンポーネントの CSS を含めるだけで済みます。必要になるまでを出力する必要がないため、ストリーミングと完全に互換性があります。

当使用内容决定布局的布局系统（如表格和flexbox）时，你需要注意避免加载过程中内容错位。这并不是新出现的问题，但渐进式渲染会导致这个问题更频繁地暴露。你可以hack flexbox来解决，但是CSS grid对于整体页面布局是更好的系统（flexbox对于较小组件依旧是非常棒的）。

Chrome的改变

HTML规范没有包含页面被CSS阻塞时如何渲染，它不鼓励在 body 中写，但是所有的浏览器都允许这一写法。当然，浏览器都有自己解决 body 中的 link 的方式。

Chrome & Safari ：一旦发现，立刻停止渲染，直到所有已发现的样式表都加载完成再继续渲染。这通常会导致前面尚未渲染的内容也被阻塞。
Firefox ： head 中的会阻塞渲染，直到所有已发现的样式表加载。body中的不会阻塞渲染，除非 head 中的样式表已经阻塞渲染。这会导致页面无样式内容闪烁（FOUC）。
IE/Edge ：阻塞解析器直到样式表加载完成，但允许前面的内容渲染。

在Chrome，我们也喜欢IE/Edge的行为，所以我们将向它看齐。也就是上面描述的CSS渐进式渲染的模式。我们正努力把它变为标准，从允许中加入开始。

目前，Chrome/Safari的行为是向下兼容，它只会阻塞它需要的渲染时间更长。Firefox的行为稍微复杂，但有一个解决方法...