【違い】dns-prefetch、preconnect、prefetch、preload、prerender

ブラウザがリソースを取得するまでの流れ。

[DNS の名前解決] -> [TCP 接続の確立] -> [Fetch] -> [Load] -> [Render]

意味
dns-prefetch「DNSの名前解決だけ先にやっとけ」な指示
preconnect「HTTPの接続の確立までやっとけ」な指示
prefetch「リソースを取ってくるとこまでやっとけ」な指示
preload「リソースを取ってきて読み込みまでしておけ」な指示
prerender「リソースを取ってきて読み込みもして、そのリソースに含まれるリソースも全部準備しとけ」な指示

要するに「いつでも表示できるようにしとけ」な指示

 

参考にしたページ(こちら様のページの方が分かりやすいし詳しいです):

リソースの読み込みを助けるウェブブラウザ API の世界

リンク先のページを高速表示させるには?先読み指定ざっくりまとめ|Web Work Plus

HTML/CSS/JavaScript
スポンサーリンク
この記事を書いた人
penpen

1991生まれ。
WEBエンジニアです。うんちコードなら書けます。
お仕事ください!!

技術スタック:TypeScript/Next.js/Express/Docker/AWS

penpenをフォローする
penpenをフォローする
penpenメモ

コメント

タイトルとURLをコピーしました