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 のプリロード テクノロジー

たとえば、検索ボックスに「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;>

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

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

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

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

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

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



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

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

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