性能優(yōu)化預(yù)取瀏覽器緩存什么是預(yù)取Prefetch預(yù)取Prefetch指的是在后臺推測性地speculatively獲取文檔或子資源subresources的做法這些資源對應(yīng)的是用戶很可能在不久的將來會導(dǎo)航到的頁面。如果用戶確實選擇了訪問這些頁面這種做法可以顯著減少預(yù)取頁面的加載時間。例如預(yù)取可以用于獲取“下一頁Next”按鈕所鏈接的頁面或其子資源也可以用于獲取用戶鼠標(biāo)懸停時彈出的鏈接link popup或者搜索結(jié)果頁面。通過提前將這些資源放入瀏覽器緩存當(dāng)用戶真正點擊時資源已經(jīng)就緒從而大幅縮短等待時間。預(yù)取的實際應(yīng)用場景預(yù)取的核心思想是“用帶寬換時間”。在用戶尚未明確點擊之前瀏覽器就利用空閑時間下載資源。常見的應(yīng)用場景包括分頁瀏覽在閱讀文章列表時提前預(yù)取下一頁的內(nèi)容讓翻頁體驗更流暢。懸停鏈接當(dāng)用戶鼠標(biāo)懸停在一個鏈接上時預(yù)取該鏈接指向的頁面減少點擊后的等待。搜索結(jié)果預(yù)取搜索結(jié)果中排名靠前的幾個頁面讓用戶點擊后能立即看到內(nèi)容。需要注意的是預(yù)取與預(yù)連接preconnect和預(yù)渲染prerender不同。預(yù)取只負責(zé)下載資源如 HTML、CSS、JavaScript 文件而不會執(zhí)行頁面腳本或渲染頁面。預(yù)渲染則更進一步會在后臺完全渲染頁面但消耗的資源也更大。如何實現(xiàn)預(yù)取在 Web 開發(fā)中最常用的預(yù)取方式是通過link標(biāo)簽的relprefetch屬性來聲明。例如link relprefetch href/next-page.html這段代碼告訴瀏覽器在空閑時間可以提前下載/next-page.html這個文檔。對于子資源如圖片、腳本也可以使用同樣的方式link relprefetch href/images/hero.jpg此外開發(fā)者還可以通過 JavaScript 的fetch()API 或XMLHttpRequest手動觸發(fā)預(yù)取但使用link標(biāo)簽更簡潔且能更好地利用瀏覽器的調(diào)度機制。預(yù)取的注意事項預(yù)取雖然能提升性能但并非沒有代價。它會消耗用戶的帶寬和流量尤其是在移動網(wǎng)絡(luò)環(huán)境下。因此開發(fā)者應(yīng)謹(jǐn)慎使用只預(yù)取那些用戶真正可能訪問的頁面避免過度預(yù)取導(dǎo)致資源浪費。同時預(yù)取請求會攜帶 Cookie因此對于需要認(rèn)證的頁面預(yù)取可能會帶來額外的安全考量。總之預(yù)取是一種“用空間帶寬換時間”的優(yōu)化策略適合用于用戶行為可預(yù)測的場景如分頁、輪播圖、表單提交后的跳轉(zhuǎn)等。合理使用預(yù)取能顯著提升用戶體驗。譯文來源MDN PrefetchCC BY-SA 2.5 (MDN)由本人翻譯整理轉(zhuǎn)載請注明出處。