【違い】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生まれ。
2019年くらいからフロントエンドエンジニアを目指している元アフィリエイターです💩

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

コメント

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