HTML5預加載是什么

本篇內容主要講解“HTML5預加載是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“HTML5預加載是什么”吧!

預加載是一種瀏覽器機制，使用瀏覽器空閑時間來預先下載/加載用戶接下來很可能會瀏覽的頁面/資源，當用戶訪問某個預加載的鏈接時，如果從緩存命中,頁面就得以快速呈現

瀏覽器廠商和開發者之間共同努力的一個方向就是讓網站更快。現在已有很多廣為人知的加速解決方案：CSS sprites(CSS精靈,拼圖)以及圖像優化,分布式配置文件(.htaccess),JS/文本文件壓縮，CDN加速等。

FireFox推介一種新的網站加速策略： 鏈接預加載。什么是鏈接預加載？MDN描述如下:

預加載是一種瀏覽器機制，使用瀏覽器空閑時間來預先下載/加載用戶接下來很可能會瀏覽的頁面/資源。頁面提供給瀏覽器需要預加載的集合。瀏覽器載入當前頁面完成后，將會在后臺下載需要預加載的頁面并添加到緩存中。當用戶訪問某個預加載的鏈接時，如果從緩存命中,頁面就得以快速呈現。

簡單概述：網站根據用戶分析，讓瀏覽器后臺下載指定頁面/文檔/圖片,實現起來超easy：

HTML5預加載標簽

復制代碼

代碼如下:

<!-- 頁面，可以使用絕對或者相對路徑 -->

<link rel="prefetch" href="page2.html" />

<!-- 圖片，也可以是其他類型的文件 -->

<link rel="prefetch" href="sprite.png" />

從上面的HTML代碼可以看出，預加載使用 <link> 標簽，并指定 rel="prefetch" 屬性，而href屬性就是需要預加載的文件路徑。而Mozilla還實現了一些類似的 link rel 屬性:

復制代碼

代碼如下:

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

<link rel="next" href="2.html" />

備注： https 協議也同樣支持。

何時需要預加載

網站是否采用預加載取決于你的需求，下面是一些建議：

- 如果一系列的頁面幻燈片一樣展示，那么可以預加載前后各1至3個頁面.

- 加載網站內部通用的圖片

- 在搜索結果頁預加載下一頁

阻止預加載

Firefox 允許禁止預加載模式，代碼如下：

復制代碼

代碼如下:

user_pref("network.prefetch-next", false);

注意事項

關于鏈接預加載，有如下注意事項：

- 預加載可以跨域進行，當然，請求時cookie等信息也會被發送。

- 預加載可能破壞網站統計數據，而用戶并沒有實際訪問。

- Mozilla Firefox 是目前唯一支持預加載模式的瀏覽器，(2003-2010)

到此，相信大家對“HTML5預加載是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！