HTML5でrel属性のプリロード機能を使用するにはどうすればよいですか?

この章では、HTML5 の rel 属性のプリロード機能の使用方法を説明します。困っている友人は参考にしていただければ幸いです。

HTML5 には、非常に便利ですが見落とされがちな機能があります。これは、プリフェッチです。その原理は次のとおりです。
ブラウザーのアイドル時間を利用して、ユーザーが指定したコンテンツを最初にダウンロードし、次にユーザーがロードするときにそれをキャッシュします。キャッシュから直接取得されるため、効率が向上します

たとえば: たとえば、特定のページをプリロードしたい場合は、次のようにすることができます:

<link rel="prefetch" href="http://www.example.com/"> <!-- Firefox -->

ただし、Google の場合は、別の A 名、つまり

<link rel="prerender" href="http://www.example.com/"> <!-- Chrome -->

を使用する必要があります。サポートされていないブラウザでもこの機能を使用することに問題はありませんが、ブラウザはそれを解析できません。そのため、ユーザーの期待を事前に予測する方法があると思われる場合は、ページ (たとえば、ユーザーが最新の人気のあるヒート マップを表示する場合、最初のページを表示した後、次のページを表示し続ける場合があります。このとき、プリロード機能を使用できます。たとえば、

<link rel="prefetch" href="<?php echo get_next_posts_page_link(); ?>">

を使用してそれを取得します)。別途、画像も使用できます。例:

<link rel="prefetch" href="/images/test.jpg"/>

ブラウザのキャッシュがあるのに、なぜプリロードする必要があるのですか?

1. ユーザーは初めて Web サイトにアクセスしている可能性があり、現時点ではキャッシュがありません。
2. ユーザーがキャッシュをクリアしている可能性があります。その場合、リソースは期限切れになります。リロードされました
4. ユーザーがアクセスしたキャッシュ ファイルは最新ではない可能性があるため、リロードする必要があります
5. Chrome のプリロード テクノロジー

Chrome は、閲覧履歴に基づいて、どの Web サイトにアクセスまたは検索するかを予測するのに十分な機能を備えています。 Web サイトを開く前に、いくつかのリソースをロードしてください。

たとえば、検索ボックスに「amaz」と入力すると、amazon.com にアクセスしたいと推測し、この Web サイトからリソースをロードすることがあります。
この予測アルゴリズムが正確であれば、ユーザーのブラウジング エクスペリエンスを大幅に向上させることができます。

DNS プリフェッチ www.amazon.com などの Web サイトにアクセスするときは、最初にドメイン名を対応する IP アドレスに変換する必要があり、これは非常に時間のかかるプロセスであることはわかっています。
DNS プリフェッチは、このページで必要なリソースが配置されているドメイン名を分析し、ブラウザーがアイドル状態のときにこれらのドメイン名を事前に IP アドレスに変換します。これにより、実際にリソースを要求する際の上記のプロセスの時間が回避されます。シナリオ 1: リソースが異なる CDN に存在する場合、これらのリソースのドメイン名を事前に宣言しておくと、リクエストが発生したときにドメイン名を解決する時間を節約できます。
アプリケーション シナリオ 2: ユーザーの次の操作で確実にリソースのリクエストが開始されることがわかっている場合、このリソースを DNS プリフェッチしてユーザー エクスペリエンスを向上させることができます。

リソースのプリフェッチ

Chrome では、link タグを使用して特定のファイルのプリロードを宣言できます:

<meta http-equiv=&#39;x-dns-prefetch-control&#39; content=&#39;on&#39;>  
<link rel=&#39;dns-prefetch&#39; href=&#39;http://g-ecx.images-amazon.com&#39;>  
<link rel=&#39;dns-prefetch&#39; href=&#39;http://z-ecx.images-amazon.com&#39;>  
<link rel=&#39;dns-prefetch&#39; href=&#39;http://ecx.images-amazon.com&#39;>  
<link rel=&#39;dns-prefetch&#39; href=&#39;http://completion.amazon.com&#39;>  
<link rel=&#39;dns-prefetch&#39; href=&#39;http://fls-na.amazon.com&#39;>

Firefox の場合、またはメタ タグを使用して宣言できます:

<link rel=&#39;subresource&#39; href=&#39;critical.js&#39;>  
<link rel=&#39;subresource&#39; href=&#39;main.css&#39;>  
<link rel=&#39;prefetch&#39; href=&#39;secondary.js&#39;>

rel='subresource' は、次のことを意味します現在のページをロードする必要があります リソースはページの先頭に配置され、最優先で最初にロードされる必要があります。

rel='prefetch' は、サブリソースのすべてのリソースがロードされるときに、ここで指定されたリソースが最も低い優先順位でプリロードされることを意味します。

注: キャッシュ可能なリソースのみがプリロードされます。プリロードされない場合、リソースは無駄になります。

プリレンダリング

前述の事前解決DNSとプリロードリソースは十分強力ですが、さらに強力なプリレンダリングがあります。 プリレンダリングとは、ユーザーがアクセスしようとしている次のページを事前に読み込むことを意味します。そうでない場合、このページのプリレンダリングはリソースを無駄にします。使用には注意してください。

<meta http-equiv="Link" content="<critical.js>; rel=prefetch">

rel='prerender' は、ブラウザーが指定されたページのレンダリングを支援しますが、このページにアクセスするとすぐに開きます。
Firefox の場合、または rel='next' を使用して宣言します

<link rel=&#39;prerender&#39; href=&#39;http://www.pagetoprerender.com&#39;>

すべてのリソースをプリロードできるわけではありません

リソースが次のリストのリソースである場合、プリレンダリング操作はブロックされます: 1.URL が含まれていますダウンロード リソース

2. ページには音声とビデオが含まれます

3. POST、PUT、および DELETE 操作の Ajax リクエスト
5. HTTPS ページ
6. マルウェアを含むページ
7. バウンス ウィンドウ ページ
8多くのリソースを消費するページ



Chrome 開発者ツールを開きます

リンク [rel='prerender'] を先頭に挿入します:

<link rel="next" href="http://www.pagetoprerender.com">

以上がHTML5でrel属性のプリロード機能を使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。