今後のCSSファイル読み込み方法_html/css_WEB-ITnose
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的行为稍微复杂，但有一个解决方法...
Firefixing
因为Firefox并不经常因为 body 中的 link 阻塞渲染，我们需要解决它以避免FOUC。值得庆幸的是，这并不难，因为
ホット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）
ホットトピック
7322
9
1625
14
1350
46
1262
25
1209
29
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
Mar 04, 2025 pm 12:32 PM
公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
WebページのPNG画像にストローク効果を効率的に追加する方法は？
Mar 04, 2025 pm 02:39 PM
この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？
Mar 12, 2025 pm 04:05 PM
この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
