1、dns-prefetch#
ドメインを IP に変換するのは時間がかかるプロセスですが、dns-prefetchはブラウザがアイドル状態のときにこの処理を行います。特に大規模なウェブサイトでは複数のドメインを使用することがあり、その場合はdnsのプリフェッチがさらに必要です。
<link rel="dns-prefetch" href="//baidu.com" />
2、prefetch#
prefetchは通常、使用する可能性のあるリソースを事前に読み込むために使用されます。一般的にはユーザーの動作に基づいて判断され、ブラウザはアイドル状態のときにprefetchのリソースを読み込みます。
<link rel="prefetch" href="http://www.baidu.com/" />
3、preload#
prefetchとは異なり、prefetchは通常、次に使用する可能性のあるページのリソースを読み込みますが、preloadは現在のページで使用するスクリプト、スタイル、フォント、画像などのリソースを読み込みます。そのため、preloadはアイドル時に読み込まれるのではなく、優先度が高く、httpのリクエスト数を占有します。
<link rel="preload" href="style.css" as="style" />
asの値には以下が含まれます#
scriptstyleimagemediadocumentonloadメソッドはリソースの読み込みが完了したときに実行されます
4、preconnect#
ブラウザがサーバーにリソースを要求する際には、接続を確立する必要があります。安全な接続を確立するには、以下の 3 つのステップが必要です：
- ドメインを検索し、IP アドレスに解決する（DNS Lookup）；
- サーバーとの接続を確立する（Initial connection）；
- セキュリティを確保するために接続を暗号化する（SSL）；
これらの 3 つのステップは、ブラウザがサーバーと通信するために必要ですが、このやり取りにはかなりの時間がかかります。
自分のサイトが他のドメインのリソースを要求する必要がある場合、そのドメインとの接続を確立する必要があり、リソースの要求を行う前に直接ダウンロードを開始できます。通常のリクエストと preconnect を設定したリクエストを比較すると、リクエストのタイムライン上で異なる動作が見られます。
以下の設定により、https://example.comというドメインとの接続を事前に確立できます：
<link rel="preconnect" href="https://example.com">
preconnect を使用してサードパーティのソースとの接続を事前に確立することで、リソースの読み込み時間を 100ms〜500ms 短縮することができます。この時間はささいなものに見えるかもしれませんが、実際にはページのパフォーマンスを最適化し、ユーザーエクスペリエンスを向上させるものです。
preconnect を使用して他のドメインと接続を確立した後は、できるだけ早く使用する必要があります。ブラウザは 10 秒間使用されなかった接続を閉じます。不要なプリコネクトは他の重要なリソースの遅延の原因となるため、preconnect の接続ドメインの数を制限する必要があります。
5、deferとasync#
//defer
<script defer src="script.js"></script>
//async
<script async src="script.js"></script>
deferとasyncはいずれも非同期（並行）でリソースを読み込みますが、異なる点はasyncは読み込み完了後にすぐに実行されるのに対し、deferは読み込み完了後に実行されず、すべての要素が解析されるまで待機し、つまりDOMContentLoadedイベントが発生するまで待機します。asyncで読み込まれるリソースは順序を保証できないため、順番にスクリプトが実行されることはありませんが、deferはスクリプトを順番に実行します。
