HTMLのリンクRel PrefetchとPreloadの違いは何ですか？

Rel = "Preload"は、現在のページで非常に必要な優先度の高いリソースに使用されますが、Rel = "Prefett"は、将来必要になる可能性のある低優先度リソースに使用されます。 1。REL= "Preload"は、現在のページのレンダリング速度を改善するために、フォント、スクリプト、スタイルシートなどの主要なリソースをすぐにダウンロードするようブラウザに指示します。 2。REL= "Prefetch"は、ブラウザが次のページのCSSやJSファイルなど、アイドル状態の場合に使用できるリソースをダウンロードできるようにするプロンプトとして機能します。どちらも負荷のパフォーマンスを最適化するように設計されていますが、さまざまなシナリオに適用でき、誤った使用は帯域幅の廃棄物や性能の低下につながる可能性があります。

HTMLのlink rel="prefetch"とlink rel="preload"の違いは、目的とタイミングに帰着します。どちらもリソースの負荷の最適化に使用されますが、異なる役割を果たし、特定のコンテキストで使用する必要があります。

rel="prefetch"とは何ですか？

Prefetch 、将来的にはリソースが必要になる可能性がある、おそらくフォローアップのナビゲーションまたはページの負荷で、ブラウザの優先度の低いヒントです。ユーザーがリソースを必要とするかどうか100％確信がない場合に使用するのが最適ですが、彼らがそうする可能性は十分にあります。

例えば：

• ユーザーがリンクを越えたときに、次のページのCSSまたはJSをプリフェッチします。
• ユーザーがデスクトップ上にいるときのモバイルサイトバージョンの資産のプリロード。

一般的なユースケース：

• ナビゲーションベースの予測（次のページなど）
• 後で必要になる可能性のある怠惰なロードされたリソース

<link rel = "prefetch" href = "/next-page.css" as = "style">

注：ブラウザは、現在のページの重要なリソースが完了した場合にのみ、これらをダウンロードします。

rel="preload"とは何ですか？

一方、 Preload 、現在のページのロード中に、多くの場合、リソースがすぐに必要になることをブラウザに伝える優先度の高い指示です。これにより、レンダリングに不可欠なフォント、スクリプト、画像などの主要資産の早期読み込みを優先するのに役立ちます。

例えば：

• FOIT（目に見えないテキストのフラッシュ）を避けるために必要になる前にカスタムフォントをロードします。
• ページの後半で参照されている重要なJavaScriptファイルを取得します。

 <link rel = "preload" href = "/fality-script.js" as = "script">

これは、ブラウザに「まだ参照されていない場合でも、今すぐダウンロードを開始します。」

次のようなものをプリロードすることもできます。

• フォント（ as="font" ）
• 画像（ as="image" ）
• styleSheets（ as="style" ）

preloadに注意してください - 実際に使用されていないリソースを指定する場合、帯域幅を無駄にします。

いつ使用するの？

これがクイックガイドです：

• preloadを使用する場合：

  • 現在のページに必要なリソースが正確に知っています。
  • キーファイルを以前にロードすることにより、レンダリングをスピードアップします。
  • フォントや非同期スクリプトなどのレンダリングブロッキングリソースを扱っています。

• prefetchを使用する場合：

  • ユーザーが次に何をするかを推測しています（リンクをクリックするなど）。
  • 現在のナビゲーションを遅くすることなく、将来のナビゲーションの準備をしたいと考えています。
  • マルチページフロー（例えば、ページネーション）を最適化しています。

重要な違いの概要

したがって、基本的に、プリロードは「今すぐニーズ」用であり、プリフェッチは「後で必要になるかもしれない」のためです。
それらは両方とも正しく使用すると強力なツールですが、誤用はそれを助ける代わりにパフォーマンスを傷つける可能性があります。

以上がHTMLのリンクRel PrefetchとPreloadの違いは何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。