HTML5預加載的方法

HTML5預加載是一種浏覽器機制使用浏覽器空閒時間來預先下載/加載用戶接下來很可能會浏覽的頁面/資源當用戶訪問某個預加載的鏈接時如果從緩存命中頁面就得以快速呈現

浏覽器廠商和開發者之間共同努力的一個方向就是讓網站更快現在已有很多廣為人知的加速解決方案CSS sprites(CSS精靈拼圖)以及圖像優化分布式配置文件(htaccess)JS/文本文件壓縮CDN加速等

我在另一篇博文中介紹了 如何讓網站更快

FireFox推介一種新的網站加速策略 鏈接預加載什麼是鏈接預加載?MDN描述如下:

預加載是一種浏覽器機制使用浏覽器空閒時間來預先下載/加載用戶接下來很可能會浏覽的頁面/資源頁面提供給浏覽器需要預加載的集合浏覽器載入當前頁面完成後將會在後台下載需要預加載的頁面並添加到緩存中當用戶訪問某個預加載的鏈接時如果從緩存命中頁面就得以快速呈現

簡單概述網站根據用戶分析讓浏覽器後台下載指定頁面/文檔/圖片實現起來超easy

HTML預加載標簽

代碼如下:

從上面的HTML代碼可以看出預加載使用 標簽並指定 rel="prefetch" 屬性而href屬性就是需要預加載的文件路徑而Mozilla還實現了一些類似的 link rel 屬性:

代碼如下:

備注 https 協議也同樣支持

何時需要預加載

網站是否采用預加載取決於你的需求下面是一些建議

如果一系列的頁面幻燈片一樣展示那麼可以預加載前後各至個頁面

加載網站內部通用的圖片

在搜索結果頁預加載下一頁

阻止預加載

Firefox 允許禁止預加載模式代碼如下

user_pref("networkprefetchnext" false);

注意事項

關於鏈接預加載有如下注意事項

預加載可以跨域進行當然請求時cookie等信息也會被發送

預加載可能破壞網站統計數據而用戶並沒有實際訪問

Mozilla Firefox 是目前唯一支持預加載模式的浏覽器()

你怎麼認為呢?使用空閒時間下載額外的文件屬於一種激進的優化

以上就是我們給大家介紹的HTML5預加載了。希望大家繼續關注我們的網站!