ホームページ >ウェブフロントエンド >htmlチュートリアル >今後のCSSファイル読み込み方法_html/css_WEB-ITnose
今後のCSSファイル読み込み方法_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:26:321020ブラウズ
Chrome は c9e517d0a46daf2dde2353185acb8aeb の読み込み方法を変更する予定ですが、これはリンクが 6c04bd5ca3fcae76e30b72ad730ca86d に表示されるときに非常に明白になります。ブリンク開発の記事では、その影響とパフォーマンスが不明瞭なので、ここでさらに詳しく説明したいと思います。
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>
これにより、冗長な読み込みの問題は解決されますが、ストリーミングを防ぐために 93f0f5c25f18dab9d176bd4f6de5d30e を出力するときにページに何が含まれるかを最初に知る必要があります。さらに、ブラウザはページ コンテンツをレンダリングする前にすべての 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 の実装が原因です。ページに c9e517d0a46daf2dde2353185acb8aeb が追加されると、スタイルシートが 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>
この方法は、各 c9e517d0a46daf2dde2353185acb8aeb に対して、スタイル シートをロードするときに、後続のコンテンツのレンダリングをブロックしますが、レンダリングされる前のコンテンツは許可します。最初のレンダリング。スタイル シートは並行してロードされますが、順次適用されます。このように、c9e517d0a46daf2dde2353185acb8aeb は 299c1a1bde13edad4a047def006ac2192cacc6d41bbb37262a98f745aa00fbf0 に似ています。
上記の Web サイトのタイトル ヘッダー、本文コンテンツ記事、およびフッターが最初に読み込まれ、その後他の部分がハングした場合のページ結果を見てみましょう:
- タイトル: レンダリング
- テキスト: レンダリング
- コメント: いいえレンダリング、その前の CSS はロードされていません (/comment.css)
- 自己紹介: レンダリングはありません、その前の CSS はロードされていません (/comment.css)
- フッター: レンダリングはありません、その前の CSS はロードされていますロードされていません CSS はまだロードされていません ( /comment.css )。独自の CSS はロードされていますが、ブロックされています
これは順次レンダリングされるページです。どのコンテンツが「明白」であるかを決める必要はありません。コンポーネントがページ上でインスタンス化される前に、コンポーネントの CSS を含めるだけで済みます。必要になるまで 2cdf5bf648cf2f33323966d7f58a7f3f を出力する必要がないため、ストリーミングと完全に互換性があります。
当使用内容决定布局的布局系统（如表格和flexbox）时，你需要注意避免加载过程中内容错位。这并不是新出现的问题，但渐进式渲染会导致这个问题更频繁地暴露。你可以hack flexbox来解决，但是CSS grid对于整体页面布局是 更好的系统 （flexbox对于较小组件依旧是非常棒的）。
Chrome的改变
HTML规范 没有包含页面被CSS阻塞时如何渲染，它不鼓励在 body 中写 bebd0ecdfd785f07088dfd0141513585 ，但是所有的浏览器都允许这一写法。当然，浏览器都有自己解决 body 中的 link 的方式。
- Chrome & Safari ：一旦发现 bebd0ecdfd785f07088dfd0141513585 ，立刻停止渲染，直到所有已发现的样式表都加载完成再继续渲染。这通常会导致 2cdf5bf648cf2f33323966d7f58a7f3f 前面尚未渲染的内容也被阻塞。
- Firefox ： head 中的 bebd0ecdfd785f07088dfd0141513585 会阻塞渲染，直到所有已发现的样式表加载。body中的 bebd0ecdfd785f07088dfd0141513585 不会阻塞渲染，除非 head 中的样式表已经阻塞渲染。这会导致页面无样式内容闪烁（FOUC）。
- IE/Edge ：阻塞解析器直到样式表加载完成，但允许 2cdf5bf648cf2f33323966d7f58a7f3f 前面的内容渲染。
在Chrome，我们也喜欢IE/Edge的行为，所以我们将向它看齐。也就是上面描述的CSS渐进式渲染的模式。我们正努力把它变为标准，从允许 6c04bd5ca3fcae76e30b72ad730ca86d 中加入 2cdf5bf648cf2f33323966d7f58a7f3f 开始。
目前，Chrome/Safari的行为是向下兼容，它只会阻塞它需要的渲染时间更长。Firefox的行为稍微复杂，但有一个解决方法...
Firefixing
因为Firefox并不经常因为 body 中的 link 阻塞渲染，我们需要解决它以避免FOUC。值得庆幸的是，这并不难，因为 3f1c4e4b6b16bbbd69b2ee476dc4f83a 可以阻塞解析， 这样就可以等待挂起的样式表加载完成：
<link rel="stylesheet" href="/article.css"><script> </script><main>…</main>
该脚本元素必须是非空的，放个空格就好了。
看看实际的应用情况
查看DEMO
Firefox和Edge/IE会给你一个可爱的渐进式渲染，而Chrome和Safari在所有CSS加载完成之前都是无样式的白色屏幕。目前Chrome/Safari并不比你把所有的样式表放在 93f0f5c25f18dab9d176bd4f6de5d30e 中更糟糕，所以你现在可以开始使用这个方法。在接下来的几个月里，Chrome将迁移到Edge模型，用户将得到更快的渲染。
所以我们可以尝试了！一个更简单的只需加载你需要的CSS的方法，然后得到一个更快的渲染的过程。
感谢 @lukedjn 、Paul Lewis和Domenic Denicola的改正建议。特别感谢Boris Zbarsky帮我理解了Firefox的行为。还有Paul想出的“Firefixing”的技巧。
本文根据 @Jake 的《 The future of loading CSS 》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处： https://jakearchibald.com/2016/link-in-body/ 。
彦子
在校学生，本科计算机专业。逗比一枚，热爱前端热爱生活，喜欢CSS喜欢JavaScript喜欢SVG，爱玩PS玩AI玩啊逗比的软件。努力向上，厚积薄发。