首頁 > web前端 > H5教程 > HTML5 預先載入讓頁面快​​速呈現_html5教學技巧

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

WBOY
發布: 2016-05-16 15:49:02
原創
2554 人瀏覽過

瀏覽器廠商和開發者之間共同努力的方向就是讓網站更快。現在已經有許多廣為人知的加速解決方案: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)
你怎麼認為呢?使用空閒時間下載額外的檔案屬於一種激進的優化
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板