在HTML5中,有個很有用但常被忽略的特性,就是預先加載(prefetch),它的原理是:
利用瀏覽器的空閑時間去先下載用戶指定需要的內容,然后緩存起來,這樣用戶下次加載時,就直接從緩存中取出來,效率就快了.

舉個例子說明:比如要預先加載某個頁面,可以這樣:

但如果是google的話,要用另外的一個名稱,即:

即使在不支持的瀏覽器,用了這個特性其實是不會出錯的,只不過瀏覽器解析不到而已,
所以,如果你感覺能有辦法預先預測到用戶期望點的頁面(比如用戶看最新的受歡迎的熱圖,他 可能看了第一頁后,會繼續(xù)看下一頁,這個時候就可以用預先加載這個特性了).比如

而單獨取一張圖片也是可以的,比如:

有了瀏覽器緩存，為何還需要預加載？
1.用戶可能是第一次訪問網站，此時還無緩存
2.用戶可能清空了緩存
3.緩存可能已經過期，資源將重新加載
4.用戶訪問的緩存文件可能不是最新的，需要重新加載
5.Chrome 的預加載技術
現(xiàn)在的 chrome 聰明到根據你的瀏覽記錄，預測到你可能訪問或搜索哪些網站，在你打開網站之前就加載好了一些資源了。
舉個栗子，當你在搜索框輸入 "amaz" 時，它猜測到你可能要訪問 amazon.com，可能就幫你加載了這個網站的一些資源。
如果這個預測算法精準的話，就能大大地提高用戶的瀏覽體驗了。

DNS prefetch
我們知道，當我們訪問一個網站如 www.amazon.com 時，需要將這個域名先轉化為對應的 IP 地址，這是一個非常耗時的過程。
DNS prefetch 分析這個頁面需要的資源所在的域名，瀏覽器空閑時提前將這些域名轉化為 IP 地址，真正請求資源時就避免了上述這個過程的時間。

應用場景1：我們的資源存在在不同的 CDN 中，那提前聲明好這些資源的域名，就可以節(jié)省請求發(fā)生時產生的域名解析的時間。
應用場景2：如果我們知道用戶接下來的操作一定會發(fā)起一起資源的請求，那就可以將這個資源進行 DNS-Prefetch，加強用戶體驗。

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

在 Firefox 中或用 meta 標簽聲明：

rel='subresource' 表示當前頁面必須加載的資源，應該放到頁面最頂端先加載，有最高的優(yōu)先級。
rel='prefetch' 表示當 subresource 所有資源都加載完后，開始預加載這里指定的資源，有最低的優(yōu)先級。
注意：只有可緩存的資源才進行預加載，否則浪費資源！

Pre render
前面說到的預解析DNS、預加載資源已經夠強悍了有木有，可還有更厲害的預渲染（Pre-rendering）！
預渲染意味著我們提前加載好用戶即將訪問的下一個頁面，否則進行預渲染這個頁面將浪費資源，慎用！

rel='prerender' 表示瀏覽器會幫我們渲染但隱藏指定的頁面，一旦我們訪問這個頁面，則秒開了！
在 Firefox 中或用 rel='next' 來聲明

不是所有的資源都可以預加載
當資源為以下列表中的資源時，將阻止預渲染操作：
1.URL 中包含下載資源
2.頁面中包含音頻、視頻
3.POST、PUT 和 DELETE 操作的 ajax 請求
4.HTTP 認證(Authentication)
5.HTTPS 頁面
6.含惡意軟件的頁面
7.彈窗頁面
8.占用資源很多的頁面
9.打開了 chrome developer tools 開發(fā)工具

手動觸發(fā)預渲染操作
在 head 中強勢插入 link[rel='prerender'] 即可：

最新評論