從 HTML Standard 可以看到，Link Types 所擁有的類型，在日常中關注性能優化的應該也會使用過 dns-prefetch / preconnect / prefetch / preload 等資源預加載的技術。
那麼，它們之前都有什麼樣的區別，如果正確使用才能提高頁面的性能呢？
首先，對於一個資源的請求來說，大致經過的階段如下：
<link src="https://example.com" ...>
dns-prefetch#
<link src="https://example.com" rel="dns-prefetch" ...>
preconnect#
<link src="https://example.com" rel="preconnect" ...>
prefetch#
<link rel="prefetch" src="./image.jpg" as="image" />
從名字可以看出來，就是預先緩存資源，然後當需要使用到這個資源的時候，直接從瀏覽器的緩存中取出，從而提高用戶體驗。
prefetch 的加載策略有兩種類型：
- 預測性預加載（Predictive Prefetching）：瀏覽器根據用戶的行為和歷史數據來預測將來可能會訪問的頁面，並在後台預加載相關資源。這種策略可以在用戶實際點擊鏈接之前提前加載資源，以減少頁面加載時間。
- 提前預加載（Eager Prefetching）：在 HTML 中顯式地指定需要預加載的資源。這些資源可能是當前頁面所需的資源，也可以是其他頁面的資源。通過提前加載這些資源，可以減少後續頁面的加載時間。
現在討論的是第 2 種情況。
要注意的是，瀏覽器並不一定會執行 prefetch。雖然 prefetch 是一種建議性的加載策略，但具體是否執行預加載取決於瀏覽器的實現和策略。
瀏覽器在解析 HTML 頁面時會檢測 prefetch 標籤，並根據自身的策略來決定是否執行預加載。瀏覽器可能會考慮多個因素，包括當前網絡連接的狀況、系統資源的使用情況、用戶行為等。如果瀏覽器認為執行預加載會對用戶體驗產生積極影響，它可能會選擇執行預加載，否則可能會忽略 prefetch 標籤。
因此，我們不能完全依賴瀏覽器執行 prefetch，而應該將 prefetch 視為一種優化手段，用於提高用戶體驗。同時，還應該注意合理使用 prefetch，避免過度預加載導致不必要的網絡流量和資源浪費。
preload#
<link rel="preload" src="./image.jpg" as="image" />
preload 是一種強制性的加載策略，與 prefetch 不同，瀏覽器會立即執行預加載操作。
preload 的加載策略有兩種情況：
-
提前預加載（Eager Preloading）：在 HTML 中使用
<link rel="preload">標籤來指定需要預加載的資源。這些資源可以是當前頁面所需的資源，也可以是其他頁面的資源。通過提前加載這些資源，可以減少後續頁面的加載時間。 -
隱式預加載（Implicit Preloading）：瀏覽器根據頁面的 HTML、CSS 和 JavaScript 代碼中的引用關係來自動判斷需要預加載的資源。例如，當瀏覽器解析 HTML 頁面時，發現某個圖片元素被 JavaScript 動態創建並插入到頁面中，瀏覽器可能會自動預加載該圖片資源。
要注意是，preload 是一種強制性的加載策略，瀏覽器會立即執行預加載操作，無論當前網絡連接的狀況如何。這可以確保在頁面加載時，一些關鍵資源已經被提前加載，並且在後續的渲染過程中可以立即使用。
與 prefetch 類似，我們在使用 preload 時需要謹慎評估預加載的資源和對網絡帶寬的消耗，以及對用戶體驗的實際影響。
舉個例子，如果用戶的網絡帶寬不高，或者設備性能比較落後，那麼大量的 preload 資源將會極大的影響用戶使用體驗。
--EOF--