HTML5 預先載入讓頁面快​​速呈現_html5教學技巧

瀏覽器廠商和開發者之間共同努力的方向就是讓網站更快。現在已經有許多廣為人知的加速解決方案：CSS sprites(CSS精靈,拼圖)以及圖像優化,分散式設定檔(.htaccess),JS/文字檔壓縮，CDN加速等。

我在另一篇部落格文章中介紹了 如何讓網站更快。
FireFox推廣一種新的網站加速策略： 連結預先載入。什麼是連結預載？ MDN描述如下:

預先載入是一種瀏覽器機制，使用瀏覽器空閒時間來預先下載/載入使用者接下來很可能會瀏覽的頁面/資源。頁面提供給瀏覽器需要預先載入的集合。瀏覽器載入目前頁面完成後，將會在背景下載需要預先載入的頁面並新增到快取中。當使用者造訪某個預先載入的連結時，如果從快取命中,頁面就得以快速呈現。

簡單概述：網站根據使用者分析，讓瀏覽器後台下載指定頁面/文件/圖片,實作超easy：

HTML5預先載入標籤

複製程式碼

程式碼如下:

從上面的HTML程式碼可以看出，預先載入使用 標籤，並指定rel="prefetch" 屬性，而href屬性就是需要預先載入的檔案路徑。而Mozilla也實作了一些類似的link rel 屬性:

複製程式碼

程式碼如下:

備註： https 協定也同樣支援。

何時需要預先載入
網站是否採用預先載入取決於你的需求，以下是一些建議： - 如果一系列的頁面幻燈片一樣展示，那麼可以預先載入前後各1至3頁.
- 載入網站內部通用的圖片
- 在搜尋結果頁預先載入下一頁


阻止預先載入
Firefox 允許禁止預先載入模式，程式碼如下：

複製程式碼碼> user_pref("network.prefetch-next", false);

注意事項

關於連結預加載，有如下注意事項：
- 預先載入可以跨網域進行，當然，請求時cookie等資訊也會被傳送。 - 預先載入可能破壞網站統計數據，而使用者並沒有實際存取。 - Mozilla Firefox 是目前唯一支援預先載入模式的瀏覽器，(2003-2010)
你怎麼認為呢？使用空閒時間下載額外的檔案屬於一種激進的優化