CSS の読み込みはページ rendering_html/css_WEB-ITnose には影響しません

ページのレンダリングに影響を与えずに CSS を読み込む

この記事では、スタイル シートを非同期的にダウンロードして、スタイル シートのダウンロードがページのレンダリングをブロックしないようにして、訪問者ができるだけ早く情報コンテンツを取得できるようにする手法を示します。

警告! 私は善意でこれを投稿していますが、これを読んだ人に以下で遭遇する問題を知らせる責任はありません。コミュニティからはすぐに多くのフィードバックが寄せられました (いくつかのフィードバックには感謝しています)。そして、このテクノロジーが私が期待していたほど安定していないことがますます明らかになり、テストと活用に成功した私とは異なり、多くの開発者が IE と Firefox で問題を経験していましたが (Chrome と Safari で F F テストがクラッシュしました)、他の開発者は での成功を報告しました。クロムとサファリ。今の私のアドバイスは、製品には使用しないことです。このフィードバックに対処し、関連情報を含めてこの記事を更新する予定です。

これらのテクニックの背後にある原理は新しいものではありません。たとえば、Filament 技術チームは CSS とフォントのロードに関する多くのコンテンツを公開しています。この記事は、ノンブロッキング リソースのロードに関する私の考えと意見を記録するために書きました。

非同期スタイルのダウンロードをトリガーするコツは、2cdf5bf648cf2f33323966d7f58a7f3f 要素を使用し、media 属性に使用できない値を設定することです (ここでは media="none" を使用しましたが、他の値も使用できます)。メディア クエリが false と評価された場合でも、ブラウザはスタイル シートをダウンロードしますが、ページをレンダリングする前にスタイル シート リソースが利用可能になるのを待ちません。

<link rel="stylesheet" href="css.css" media="none">

スタイル シートをダウンロードしたら、スタイル ルールを HTML ドキュメントに適用できるように、メディア属性を使用可能な値に設定する必要があります。onload イベントを使用してメディア属性を all に切り替えることができます。

<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'">

この CSS 読み込み方法は、標準的な方法よりもはるかに速く、訪問者に有益な情報を提供します。重要な CSS は通常のブロック方法で読み込むことができます (または、究極のパフォーマンスを得るためにインラインで処理することもできます)。一方、重要でないスタイルは、解析/レンダリング プロセス中にゆっくりとダウンロードしてレンダリングでき、後の段階で適用されます。

この手法では JavaScript を使用しますが、JavaScript を実行できないブラウザを処理するために、同等のブロック 2cdf5bf648cf2f33323966d7f58a7f3f 要素を 2b0b25ff593c5b6c03403dd6234ffb2c 要素でラップすることもできます。ノンブロッキング スタイル シートの読み込みが完了すると、ドキュメントが再描画されて、定義されている新しいスタイル ルールが反映されます。新しいスタイルをページに挿入するとコンテンツのリフローがトリガーされますが、これが問題となるのは履歴キャッシュがないページの最初の読み込み時のみです。パフォーマンスに関連するものと同様に、リフローのコストを制御する必要性が潜在的な速度の利点を上回る場合は、必要な調整を行う必要があります。

フォントを読み込むには非ブロッキング CSS を使用してください

フォントの最初の描画のパフォーマンスが問題であり、それらはリソースをブロックしており、フォントのダウンロード時に適用されているテキストが非表示になります。上記の例の非ブロッキング リンクを使用すると、表面のレンダリングをブロックせずに、フォント データを含むスタイルシートをバックグラウンドでダウンロードできます:

<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'">

font.css には、Merriweather フォントの Base64 でエンコードされた WOFF バージョンが含まれています。

<link rel="stylesheet" href="main.css"><link rel="stylesheet" href="font.css" media="none" onload="if(media!='all')media='all'">

main.css には、サイトに適用する必要があるすべてのスタイル ルールが含まれています。フォント宣言は次のとおりです:

@font-face {  font-family: Merriweather;  font-style: normal;  font-weight: 400;  src: local('Merriweather'), url('data:application/x-font-woff;charset=utf-8;base64,...')}

フォントのダウンロード中、最初に一致したフォールバック フォント (この場合は

Lucida Grande

) がページのコンテンツのレンダリングに使用されます。 フォント スタイルシートが適用されると、Merriweather が使用され、避けられないリフローが可能な限り目立たないよう、フォールバック フォントが優先フォントと同様のレイアウト特性を共有するように努めます。 Chrome の Google アナリティクス デバッガー サイトを使用して、シミュレートされた 3G ネットワーク接続でブロッキングと非ブロッキングをテストしました。ローカル テストでは、以下に示すネットワーク グラフが生成されました。DOMContentLoaded が 450 ミリ秒早くトリガーされ、ノンブロッキング テクノロジーを使用した後はリソースのダウンロードが速くなっていることに注意してください。

3G ネットワークをシミュレートするグラフ。ブロックされたフォントが上部に表示されます。下部にはノンブロッキング フォントが表示されます。

これをテスト サーバーにデプロイし、3G 接続で webpagetest コンストラクトを実行すると、次のタイムラインが生成されます:

3G タイムライン。ブロッキング フォントは上部に表示され、非ブロッキング フォントは下部に表示されます。

どちらの方法もページを完全にレンダリングするのに 2.8 秒かかりましたが、非ブロック方法は通常のブロック方法よりも 1 秒早く描画されました。メイン スタイルシートをインラインで使用して同じテストを実行すると、フォントの処理にノンブロッキング CSS が適用されている場合に 0.7 秒の時間的利点が示されます:

メイン CSS コンテンツの 3G タイムライン。ブロッキング フォントを上部に表示し、非ブロッキング フォントを下部に表示します。

このテクニックはフォントに対して非常にうまく機能しますが、フォントの読み込みをより細かく制御できる新しい CSS フォント読み込みモジュールにも注目することをお勧めします。

概要

フォントの読み込みはノンブロッキング技術を適用する例ですが、JavaScript 拡張スタイルをコア CSS から分離するなど、他の目的にも使用できます。

私は、スタイルをフレーム (コア レイアウト) とプレゼンテーション (その他すべて) に分割するというアイデアの実験を開始しました。これにより、表示されるスタイル データがしばらく遅延する一方で、重要なページ レイアウトがページ レンダリングをブロックできるようになります。

この記事のアドレス: http://www.oschina.net/translate/loading-css-without-blocking-render

元のアドレス: http://keithclark.co.uk/articles/loading-css- -blocking-render なし /