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