在網(wǎng)站W(wǎng)EB前端設(shè)計(jì)中，如果想加快網(wǎng)頁的加載速度，減少網(wǎng)站訪客的等待時間，經(jīng)常要對html頁面文件，css文件，JS文件，圖片文件等靜態(tài)文件進(jìn)行壓縮，也有的會使用CDN一類的加速服務(wù)。而今天我們說一說，html5中的一項(xiàng)預(yù)加載功能。

HTML5的預(yù)加載的方法

預(yù)加載是瀏覽器的一種機(jī)制，其在瀏覽器加載完當(dāng)前頁面時，并利用空閑下來的時間，在后臺靜默加載用戶在將來可能要訪問的文檔或文件。以便用戶在訪問其頁面時，提高頁面的載入速度。

HTML5頁面資源預(yù)加載/預(yù)讀取的功能是通過 Link 標(biāo)記實(shí)現(xiàn)的，將 rel 屬性指定為“prefetch”，在 href 屬性里指定要加載資源的地址。

示例代碼：

預(yù)加載一張圖片

<link rel="prefetch" href="big.jpeg">

預(yù)加載一個頁面

<link rel="prefetch" href="http://www.feiniaomy.com/post/1.html">

預(yù)加載一個CSS文件

<link rel='prefetch' href='style.css'>

HTML5的預(yù)加載的使用環(huán)境

在什么頁面，什么環(huán)境下使用HTML5的預(yù)加載功能，這主要取決于網(wǎng)站的頁面訪問質(zhì)量。不過下面總結(jié)了三點(diǎn)，大家可以參考一下

1、在網(wǎng)站的首頁，對一些重要的頁面或點(diǎn)擊率高的頁面進(jìn)行預(yù)加載

2、對整個網(wǎng)站通用，或是使用頻率較高的靜態(tài)文件進(jìn)行預(yù)加載

3、網(wǎng)站的搜索頁面，對結(jié)果的下一頁面進(jìn)行預(yù)加載

HTML5的預(yù)加載注意事項(xiàng)

1、服務(wù)器配置低或網(wǎng)站的訪客量少的網(wǎng)站，不建議使用HTML5預(yù)加載

2、對一些訪問量高的頁面或資源使用預(yù)加載功能，對于訪問量低的頁面或資源盡量不要使用

3、HTML5的預(yù)加載功能，會對網(wǎng)站的第三方統(tǒng)計(jì)數(shù)據(jù)造成污染，導(dǎo)致統(tǒng)計(jì)數(shù)據(jù)不準(zhǔn)確

4、網(wǎng)站的訪問跳出率(第三方統(tǒng)計(jì)工具查看)超過90%以上，不建議使用預(yù)加載功能