HTML5 預(yù)加載讓頁(yè)面得以快速呈現(xiàn)

2020-03-24 17:30:06

字體：大中小

供稿：網(wǎng)友

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

我在另一篇博文中介紹了如何讓網(wǎng)站更快。
FireFox推介一種新的網(wǎng)站加速策略：鏈接預(yù)加載。什么是鏈接預(yù)加載？MDN描述如下:

預(yù)加載是一種瀏覽器機(jī)制，使用瀏覽器空閑時(shí)間來(lái)預(yù)先下載/加載用戶接下來(lái)很可能會(huì)瀏覽的頁(yè)面/資源。頁(yè)面提供給瀏覽器需要預(yù)加載的集合。瀏覽器載入當(dāng)前頁(yè)面完成后，將會(huì)在后臺(tái)下載需要預(yù)加載的頁(yè)面并添加到緩存中。當(dāng)用戶訪問(wèn)某個(gè)預(yù)加載的鏈接時(shí)，如果從緩存命中,頁(yè)面就得以快速呈現(xiàn)。

簡(jiǎn)單概述：網(wǎng)站根據(jù)用戶分析，讓瀏覽器后臺(tái)下載指定頁(yè)面/文檔/圖片,實(shí)現(xiàn)起來(lái)超easy：

HTML5預(yù)加載標(biāo)簽

復(fù)制代碼代碼如下:
!-- 頁(yè)面，可以使用絕對(duì)或者相對(duì)路徑 --
link rel="prefetch" href="page2.html" /
!-- 圖片，也可以是其他類型的文件 --
link rel="prefetch" href="sprite.png" /

從上面的HTML代碼可以看出，預(yù)加載使用 link 標(biāo)簽，并指定 rel= prefetch 屬性，而href屬性就是需要預(yù)加載的文件路徑。而Mozilla還實(shí)現(xiàn)了一些類似的 link rel 屬性:

復(fù)制代碼代碼如下:
link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css" /
link rel="next" href="2.html" /

備注： https 協(xié)議也同樣支持。

何時(shí)需要預(yù)加載
網(wǎng)站是否采用預(yù)加載取決于你的需求，下面是一些建議：
- 如果一系列的頁(yè)面幻燈片一樣展示，那么可以預(yù)加載前后各1至3個(gè)頁(yè)面.
- 加載網(wǎng)站內(nèi)部通用的圖片
- 在搜索結(jié)果頁(yè)預(yù)加載下一頁(yè)

阻止預(yù)加載
Firefox 允許禁止預(yù)加載模式，代碼如下：

復(fù)制代碼代碼如下:
user_pref("network.prefetch-next", false);

注意事項(xiàng)
關(guān)于鏈接預(yù)加載，有如下注意事項(xiàng)：
- 預(yù)加載可以跨域進(jìn)行，當(dāng)然，請(qǐng)求時(shí)cookie等信息也會(huì)被發(fā)送。
- 預(yù)加載可能破壞網(wǎng)站統(tǒng)計(jì)數(shù)據(jù)，而用戶并沒有實(shí)際訪問(wèn)。
- Mozilla Firefox 是目前唯一支持預(yù)加載模式的瀏覽器，(2003-2010)
你怎么認(rèn)為呢？使用空閑時(shí)間下載額外的文件屬于一種激進(jìn)的優(yōu)化html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：HTML中的meta設(shè)置方法

下一篇：xhtml的標(biāo)簽和元素介紹