HTML5頁面資源預載入(Link prefetch)寫法
阿新 • • 發佈:2019-01-08
不管是瀏覽器的開發者還是普通web應用的開發者,他們都在做一個共同的努力:讓Web瀏覽有更快的速度感覺。有很多已知的技術都可以讓你的網站速度變得更快:使用CSS sprites,使用圖片優化工具,使用.htaccess設定頁面頭資訊和快取時間,JavaScript壓縮,使用CDN等。我曾經介紹過本站上使用的一些速度優化技術。而在HTML5裡,出現了一個新的用來優化網站速度的新功能:頁面資源預載入/預讀取(Link prefetch)。
簡單說來就是:讓瀏覽器預先載入使用者訪問當前頁後極有可能訪問的其他資源(頁面,圖片,視訊等)。而且方法超級的簡單!
<!-- 預載入整個頁面 --> <link rel="prefetch" href="http://www.webhek.com/misc/3d-album/" /> <!-- 預載入一個圖片 --> <link rel="prefetch" href=" http://www.webhek.com/wordpress/ wp-content/uploads/2014/04/b-334x193.jpg " />
HTML5頁面資源預載入/預讀取(Link prefetch)功能是通過
Link
標記實現的,將rel屬性
指定為“prefetch”,在href屬性
裡指定要載入資源的地址。火狐瀏覽器裡還提供了一種額外的屬性支援:
<link rel="prefetch alternate stylesheet"
title="Designed for Mozilla" href="mozspecific.css" />
<link rel="next" href="2.html" />
HTTPS協議資源下也可以使用prefetch。
什麼情況下應該預載入頁面資源
在你的頁面里加載什麼樣的資源,什麼時候載入,這完全取決於你。下面是一些建議:
- 當頁面有幻燈片類似的服務時,預載入/預讀取接下來的1-3頁和之前的1-3頁。
- 預載入那些整個網站通用的圖片。
- 預載入網站上搜索結果的下一頁。
禁止頁面資源預載入(Link prefetch)
火狐瀏覽器裡有一個選項可以禁止任何的頁面資源預載入(Link prefetch)功能,你可以這樣設定:
user_pref("network.prefetch-next", false);