摘要：表示當所有資源都加載完后，開始預加載這里指定的資源，有最低的優先級。其他方面的測試，目前還沒有很好的方案，暫且只能通過查看瀏覽器是否緩存來測試。警告這些特定還是實驗性質的，將來可能改變。權利越大，責任越大，不要濫用參考鏈接

原文：HTML5 Prefetch
作者：Luis Vieira
譯文：HTML5 prefetch
譯者：@賴小賴小賴

  
聲明：此文帶著自己的理解，不完全按原文翻譯

prefetch 即預加載，在用戶需要前我們就將所需的資源加載完畢。

用戶可能是第一次訪問網站，此時還無緩存

用戶可能清空了緩存

緩存可能已經過期，資源將重新加載

用戶訪問的緩存文件可能不是最新的，需要重新加載

現在的 chrome 聰明到根據你的瀏覽記錄，預測到你可能訪問或搜索哪些網站，在你打開網站之前就加載好了一些資源了。

舉個栗子，當你在搜索框輸入 "amaz" 時，它猜測到你可能要訪問 amazon.com，可能就幫你加載了這個網站的一些資源。

如果這個預測算法精準的話，就能大大地提高用戶的瀏覽體驗了。

我們知道，當我們訪問一個網站如 www.amazon.com 時，需要將這個域名先轉化為對應的 IP 地址，這是一個非常耗時的過程。

DNS prefetch 分析這個頁面需要的資源所在的域名，瀏覽器空閑時提前將這些域名轉化為 IP 地址，真正請求資源時就避免了上述這個過程的時間。

應用場景1：我們的資源存在在不同的 CDN 中，那提前聲明好這些資源的域名，就可以節省請求發生時產生的域名解析的時間。

應用場景2：如果我們知道用戶接下來的操作一定會發起一起資源的請求，那就可以將這個資源進行 DNS-Prefetch，加強用戶體驗。

在 Chrome 下，我們可以用 link 標簽聲明特定文件的預加載：

在 Firefox 中或用 meta 標簽聲明：

rel="subresource" 表示當前頁面必須加載的資源，應該放到頁面最頂端先加載，有最高的優先級。

rel="prefetch" 表示當 subresource 所有資源都加載完后，開始預加載這里指定的資源，有最低的優先級。

注意：只有可緩存的資源才進行預加載，否則浪費資源！

前面說到的預解析 DNS、預加載資源已經夠強悍了有木有，可還有更厲害的預渲染（Pre-rendering）！

預渲染意味著我們提前加載好用戶即將訪問的下一個頁面，否則進行預渲染這個頁面將浪費資源，慎用！

rel="prerender" 表示瀏覽器會幫我們渲染但隱藏指定的頁面，一旦我們訪問這個頁面，則秒開了！

在 Firefox 中或用 rel="next" 來聲明

當資源為以下列表中的資源時，將阻止預渲染操作：

URL 中包含下載資源

頁面中包含音頻、視頻

POST、PUT 和 DELETE 操作的 ajax 請求

HTTP 認證(Authentication)

HTTPS 頁面

含惡意軟件的頁面

彈窗頁面

占用資源很多的頁面

打開了 chrome developer tools 開發工具

在 head 中強勢插入 link[rel="prerender"] 即可：

var hint =document.createElement("link")
hint.setAttribute(“rel”,”prerender”)
hint.setAttribute(“href”,”next-page.html”)
document.getElementsByTagName(“head”)[0].appendChild(hint)

這么好用的特性，當然要考慮各瀏覽器的兼容程度了(哭：

IE9 支持 DNS pre-fetching 但管它叫 prefetch。

IE10+ 中 dns-prefetch 和 prefetch 是等價的。

其他方面的測試，目前還沒有很好的方案，暫且只能通過查看瀏覽器是否緩存來測試。

在 Chrome 中打開了 chrome developer tools 開發工具會阻止頁面的預渲染，所以我們看不到這個過程，但可以在 chrome://cache/ 或 chrome://net-internals/#prerender 中查看。

Firefox 可以在 about:cache 中查看。

這些特定還是實驗性質的，將來可能改變。

權利越大，責任越大，不要濫用！

參考鏈接

html5-prefetch

MDN Controlling DNS prefetching

MDN Link prefetching FAQ