HTML5中如何使用rel屬性的預先載入功能？

本章帶給大家HTML5中如何使用rel屬性的預先載入功能？有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

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

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

<link rel="prefetch" href="http://www.example.com/"> <!-- Firefox -->

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

<link rel="prerender" href="http://www.example.com/"> <!-- Chrome -->

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

<link rel="prefetch" href="<?php echo get_next_posts_page_link(); ?>">

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

<link rel="prefetch" href="/images/test.jpg"/>

有了瀏覽器緩存，為何還需要預先載入？

1.用戶可能是第一次造訪網站，此時還無快取
2.用戶可能清空了快取
3.快取可能已經過期，資源將重新載入
4.使用者存取的快取檔案可能不是最新的，需要重新載入
5.Chrome 的預先載入技術

現在的chrome 聰明到根據你的瀏覽記錄，預測到你可能會造訪或搜尋哪些網站，在你打開網站之前就已經加載了一些資源了。
舉個栗子，當你在搜尋框輸入 "amaz" 時，它猜測到你可能要訪問 amazon.com，可能就幫你加載了這個網站的一些資源。
如果這個預測演算法精準的話，就能大幅提升使用者的瀏覽體驗了。

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

<meta http-equiv=&#39;x-dns-prefetch-control&#39; content=&#39;on&#39;>  
<link rel=&#39;dns-prefetch&#39; href=&#39;http://g-ecx.images-amazon.com&#39;>  
<link rel=&#39;dns-prefetch&#39; href=&#39;http://z-ecx.images-amazon.com&#39;>  
<link rel=&#39;dns-prefetch&#39; href=&#39;http://ecx.images-amazon.com&#39;>  
<link rel=&#39;dns-prefetch&#39; href=&#39;http://completion.amazon.com&#39;>  
<link rel=&#39;dns-prefetch&#39; href=&#39;http://fls-na.amazon.com&#39;>

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

Resource prefetch
在Chrome 下，我們可以用link標籤聲明特定檔案的預先載入：

<link rel=&#39;subresource&#39; href=&#39;critical.js&#39;>  
<link rel=&#39;subresource&#39; href=&#39;main.css&#39;>  
<link rel=&#39;prefetch&#39; href=&#39;secondary.js&#39;>

在Firefox 中或用meta 標籤宣告：

<meta http-equiv="Link" content="<critical.js>; rel=prefetch">

rel='subresource' 表示目前頁面必須載入的資源，應該放到頁面最頂端先加載，有最高的優先權。
rel='prefetch' 表示當 subresource 所有資源都載入完後，開始預先載入這裡指定的資源，有最低的優先權。
注意：只有可快取的資源才進行預加載，否則浪費資源！

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

<link rel=&#39;prerender&#39; href=&#39;http://www.pagetoprerender.com&#39;>

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

<link rel="next" href="http://www.pagetoprerender.com">

#不是所有的資源都可以預先載入

當資源為以下清單中的資源時，將阻止預先渲染操作：
1.URL 中包含下載資源
2.頁面中包含音訊、視訊
3.POST、PUT 和DELETE 操作的ajax 請求
4.HTTP 認證(Authentication)
5.HTTPS 頁面
6.含惡意軟體的頁面
7.彈出視窗頁面
8.佔用資源很多的頁面
9.打開了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)

#

以上是HTML5中如何使用rel屬性的預先載入功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！