這篇文章主要講解了“什么是HTML5資源預加載”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“什么是HTML5資源預加載”吧！

為冷水灘等地區用戶提供了全套網頁設計制作服務，及冷水灘網站建設行業解決方案。主營業務為成都網站建設、網站設計、冷水灘網站設計，以傳統方式定制建設網站，并提供域名空間備案等一條龍服務，秉承以專業、用心的態度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

我曾經介紹過本站上使用的一些速度優化技術。而在HTML5里，出現了一個新的用來優化網站速度的新功能：頁面資源預加載/預讀取(Link prefetch)。

頁面資源預加載/預讀取(Link prefetch)是什么？來自MDN的解釋:

頁面資源預加載(Link prefetch)是瀏覽器提供的一個技巧，目的是讓瀏覽器在空閑時間下載或預讀取一些文檔資源，用戶在將來將會訪問這些資源。一個Web頁面可以對瀏覽器設置一系列的預加載指示，當瀏覽器加載完當前頁面后，它會在后臺靜悄悄的加載指定的文檔，并把它們存儲在緩存里。當用戶訪問到這些預加載的文檔后，瀏覽器能快速的從緩存里提取給用戶。

簡單說來就是：讓瀏覽器預先加載用戶訪問當前頁后極有可能訪問的其他資源(頁面，圖片，視頻等)。而且方法超級的簡單！

HTML5頁面資源預加載(Link prefetch)寫法

代碼如下:

<!-- 預加載整個頁面 -->
<link rel="prefetch" href="https://www.yisu.com/misc/3d-album/" /></p> <p><!-- 預加載一個圖片 -->
<link rel="prefetch" href=" <a href="https://www.yisu.com/wordpress/">/tupian/20230522/133061.jpg " />

HTML5頁面資源預加載/預讀取(Link prefetch)功能是通過Link標記實現的，將rel屬性指定為“prefetch”，在href屬性里指定要加載資源的地址。火狐瀏覽器里還提供了一種額外的屬性支持：

代碼如下:

<link rel="prefetch alternate stylesheet"
title="Designed for Mozilla" href="mozspecific.css" _fcksavedurl=""mozspecific.css"" />
<link rel="next" href="2.html" />

HTTPS協議資源下也可以使用prefetch。

什么情況下應該預加載頁面資源

在你的頁面里加載什么樣的資源，什么時候加載，這完全取決于你。下面是一些建議：

1.當頁面有幻燈片類似的服務時，預加載/預讀取接下來的1-3頁和之前的1-3頁。
2.預加載那些整個網站通用的圖片。
3.預加載網站上搜索結果的下一頁。

禁止頁面資源預加載(Link prefetch)

火狐瀏覽器里有一個選項可以禁止任何的頁面資源預加載(Link prefetch)功能，你可以這樣設置：

1.user_pref("network.prefetch-next", false);
2.頁面資源預加載(Link prefetch)注意事項

下面是一些關于頁面資源預加載(Link prefetch)的注意事項：

1.預加載(Link prefetch)不能跨域工作，包括跨域拉取cookies。
2.預加載(Link prefetch)會污染你的網站訪問量統計，因為有些預加載到瀏覽器的頁面用戶可能并未真正訪問。
3.火狐瀏覽器從2003年開始就已經提供了對這項預加載(Link prefetch)技術的支持。

感謝各位的閱讀，以上就是“什么是HTML5資源預加載”的內容了，經過本文的學習后，相信大家對什么是HTML5資源預加載這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創新互聯網站建設公司，，小編將為大家推送更多相關知識點的文章，歡迎關注！

本文標題：什么是HTML5資源預加載-創新互聯
標題來源：http://vcdvsql.cn/article8/pgeip.html

成都網站建設公司_創新互聯，為您提供標簽優化、電子商務、移動網站建設、小程序開發、App開發、營銷型網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯