htmlのlinkラベルを再学習する

link要素は、外部リソースと現在のドキュメントとの関係を規定します.リンクスタイルシート、Webサイトアイコンの作成、リソースのプリロードなどによく使用されます.
リンクスタイルシート

サイトアイコンの作成

プリロード
フロントエンドインタフェースのパフォーマンス最適化に使用され、relのプロパティ値はpreload、prefetch、dns-prefetchであってもよい.

prefetchプリフェッチ
ユーザーが現在のインタフェースを使用する場合、ブラウザが空いている場合は、次のインタフェースで使用するリソースをローカルキャッシュにダウンロードします.ブラウザでダウンロードしないとわかりません.例えば、サイトにはA、Bの2つのインタフェースがあります.ユーザーがインタフェースAにアクセスすると、Bインタフェース(ログインジャンプなど)にアクセスする確率が高い場合、ユーザーがインタフェースAにアクセスするときに、Bインタフェースに必要なリソースを事前にローカルにダウンロードすることで、パフォーマンスが大幅に向上します.では、インタフェースA.htmlファイルに次のコードを設定するだけです.

preload 
現在のインタフェースのリソースダウンロードの優先度を制御し、ブラウザはリソースをダウンロードする必要があります.例を挙げると、ウェブサイトのインタフェースAのcssスタイルファイルに外部フォントファイルが使用されており、通常、このフォントのダウンロードはcss解析時に完了します.フォントファイルはcssスタイルファイルを解析する前にローカルにダウンロードしたほうがいいと思います.ではheadラベルにフォントのpreloadを設定できます.

dns-prefetch
文字通りに理解すれば、まずジャンプするドメイン名を解析し、時間を減らすことができます.
prefetch&preload比較

注目のページは異なります:prefetchは使用するページに注目し、preloadは現在のページ

に注目します.

リソースがダウンロードされているかどうか:prefetchのリソースのダウンロード状況は不明(ブラウザが空いている場合にのみダウンロードされます)、preloadは

をダウンロードするに違いありません.
Mediaプロパティ
Mediaプロパティは、リンクされたドキュメントがどのデバイスに表示されるかを規定します.

注:インタフェースがロードされると、両方のスタイルシートがクライアントにダウンロードされますが、シーンによって異なるスタイルが使用されます.
TODO
scriptラベルのasyncとdefer属性の違いと目的?
参照
preload&prefetch一歩フロントエンド