在網站WEB前端設計中,如果想加快網頁的加載速度,減少網站訪客的等待時間,經常要對HTML頁面文件,CSS文件,JS文件,圖片文件等靜態文件進行壓縮,也有的會使用CDN一類的加速服務。而今天我們說一說,html5中的一項預加載功能。

HTML5中的預加載功能

HTML5的預加載的方法

国产视频app預加載是瀏覽器的一種機制,其在瀏覽器加載完當前頁面時,并利用空閑下來的時間,在后臺靜默加載用戶在將來可能要訪問的文檔或文件。以便用戶在訪問其頁面時,提高頁面的載入速度。

HTML5頁面資源預加載/預讀取的功能是通過 Link 標記實現的,將 rel 屬性指定為“prefetch”,在 href 屬性里指定要加載資源的地址。

示例代碼:

預加載一張圖片

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

預加載一個頁面

<link rel="prefetch" href="http://xswdd.cn/post/1.html">

預加載一個CSS文件

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

HTML5的預加載的使用環境

在什么頁面,什么環境下使用HTML5的預加載功能,這主要取決于網站的頁面訪問質量。不過下面總結了三點,大家可以參考一下

1、在網站的首頁,對一些重要的頁面或點擊率高的頁面進行預加載

国产视频app2、對整個網站通用,或是使用頻率較高的靜態文件進行預加載

3、網站的搜索頁面,對結果的下一頁面進行預加載

HTML5的預加載注意事項

1、服務器配置低或網站的訪客量少的網站,不建議使用HTML5預加載

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

国产视频app3、HTML5的預加載功能,會對網站的第三方統計數據造成污染,導致統計數據不準確

4、網站的訪問跳出率(第三方統計工具查看)超過90%以上,不建議使用預加載功能