點評:預加載是一種瀏覽器機制,使用瀏覽器空閒時間來預先下載/加載用戶接下來很可能會瀏覽的頁面/資源,當用戶訪問某個預加載的鏈接時,如果從緩存命中,頁面就得以快速呈現
瀏覽器廠商和開發者之間共同努力的一個方向就是讓網站更快。現在已有很多廣為人知的加速解決方案:CSS sprites(CSS精靈,拼圖)以及圖像優化,分佈式配置文件(.htaccess),JS/文本文件壓縮,CDN加速等。我在另一篇博文中介紹瞭如何讓網站更快。
FireFox推介一種新的網站加速策略: 鏈接預加載。什麼是鏈接預加載? MDN描述如下:
預加載是一種瀏覽器機制,使用瀏覽器空閒時間來預先下載/加載用戶接下來很可能會瀏覽的頁面/資源。頁面提供給瀏覽器需要預加載的集合。瀏覽器載入當前頁面完成後,將會在後台下載需要預加載的頁面並添加到緩存中。當用戶訪問某個預加載的鏈接時,如果從緩存命中,頁面就得以快速呈現。
簡單概述:網站根據用戶分析,讓瀏覽器後台下載指定頁面/文檔/圖片,實現起來超easy:
HTML5預加載標籤
<!-- 頁面,可以使用絕對或者相對路徑-->
<link href="page2.html" />
<!-- 圖片,也可以是其他類型的文件-->
<link href="sprite.png" />
從上面的HTML代碼可以看出,預加載使用<link> 標籤,並指定rel=prefetch 屬性,而href屬性就是需要預加載的文件路徑。而Mozilla還實現了一些類似的link rel 屬性:
<link href="mozspecific.css" />
<link href="2.html" />
備註: https 協議也同樣支持。
何時需要預加載
網站是否採用預加載取決於你的需求,下面是一些建議:
- 如果一系列的頁面幻燈片一樣展示,那麼可以預加載前後各1至3個頁面.
- 加載網站內部通用的圖片
- 在搜索結果頁預加載下一頁
阻止預加載
Firefox 允許禁止預加載模式,代碼如下:
user_pref("network.prefetch-next", false);
注意事項
關於鏈接預加載,有如下注意事項:
- 預加載可以跨域進行,當然,請求時cookie等信息也會被發送。
- 預加載可能破壞網站統計數據,而用戶並沒有實際訪問。
- Mozilla Firefox 是目前唯一支持預加載模式的瀏覽器,(2003-2010)
你怎麼認為呢?使用空閒時間下載額外的文件屬於一種激進的優化