HTML5資源預(yù)加載(Link prefetch)詳細(xì)介紹(給你的網(wǎng)頁加速)

我曾經(jīng)介紹過本站上使用的一些速度優(yōu)化技術(shù)。而在HTML5里,出現(xiàn)了一個(gè)新的用來優(yōu)化網(wǎng)站速度的新功能:頁面資源預(yù)加載/預(yù)讀取(Link prefetch)。
頁面資源預(yù)加載/預(yù)讀取(Link prefetch)是什么?來自MDN的解釋:
頁面資源預(yù)加載(Link prefetch)是瀏覽器提供的一個(gè)技巧,目的是讓瀏覽器在空閑時(shí)間下載或預(yù)讀取一些文檔資源,用戶在將來將會(huì)訪問這些資源。一個(gè)Web頁面可以對(duì)瀏覽器設(shè)置一系列的預(yù)加載指示,當(dāng)瀏覽器加載完當(dāng)前頁面后,它會(huì)在后臺(tái)靜悄悄的加載指定的文檔,并把它們存儲(chǔ)在緩存里。當(dāng)用戶訪問到這些預(yù)加載的文檔后,瀏覽器能快速的從緩存里提取給用戶。
簡(jiǎn)單說來就是:讓瀏覽器預(yù)先加載用戶訪問當(dāng)前頁后極有可能訪問的其他資源(頁面,圖片,視頻等)。而且方法超級(jí)的簡(jiǎn)單!
HTML5頁面資源預(yù)加載(Link prefetch)寫法
<!-- 預(yù)加載整個(gè)頁面 -->
<link rel="prefetch" href="http://www.dbjr.com.cn/misc/3d-album/" /></p> <p><!-- 預(yù)加載一個(gè)圖片 -->
<link rel="prefetch" href=" <a href="http://www.dbjr.com.cn/wordpress/">http://www.dbjr.com.cn/wordpress/</a>
wp-content/uploads/2014/04/b-334x193.jpg " />
HTML5頁面資源預(yù)加載/預(yù)讀取(Link prefetch)功能是通過Link標(biāo)記實(shí)現(xiàn)的,將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協(xié)議資源下也可以使用prefetch。
什么情況下應(yīng)該預(yù)加載頁面資源
在你的頁面里加載什么樣的資源,什么時(shí)候加載,這完全取決于你。下面是一些建議:
1.當(dāng)頁面有幻燈片類似的服務(wù)時(shí),預(yù)加載/預(yù)讀取接下來的1-3頁和之前的1-3頁。
2.預(yù)加載那些整個(gè)網(wǎng)站通用的圖片。
3.預(yù)加載網(wǎng)站上搜索結(jié)果的下一頁。
禁止頁面資源預(yù)加載(Link prefetch)
火狐瀏覽器里有一個(gè)選項(xiàng)可以禁止任何的頁面資源預(yù)加載(Link prefetch)功能,你可以這樣設(shè)置:
1.user_pref("network.prefetch-next", false);
2.頁面資源預(yù)加載(Link prefetch)注意事項(xiàng)
下面是一些關(guān)于頁面資源預(yù)加載(Link prefetch)的注意事項(xiàng):
1.預(yù)加載(Link prefetch)不能跨域工作,包括跨域拉取cookies。
2.預(yù)加載(Link prefetch)會(huì)污染你的網(wǎng)站訪問量統(tǒng)計(jì),因?yàn)橛行╊A(yù)加載到瀏覽器的頁面用戶可能并未真正訪問。
3.火狐瀏覽器從2003年開始就已經(jīng)提供了對(duì)這項(xiàng)預(yù)加載(Link prefetch)技術(shù)的支持。
利用瀏覽器空閑時(shí)間加載一些額外的資源文件,看起來是既刺激又危險(xiǎn),你想試試這些技術(shù)嗎?
相關(guān)文章
使用HTML5在網(wǎng)頁中嵌入音頻和視頻播放的基本方法
這篇文章主要介紹了使用HTML5在網(wǎng)頁中嵌入音頻和視頻播放的基本方法,2016-02-22分享29個(gè)基于Bootstrap的HTML5響應(yīng)式網(wǎng)頁設(shè)計(jì)模板
如今基于Bootstrap框架的免費(fèi)HTML5網(wǎng)站已經(jīng)開始成為行業(yè)趨勢(shì)。研究人員已經(jīng)證實(shí),Bootstrap是引領(lǐng)設(shè)計(jì)和開發(fā)行業(yè)趨勢(shì)效果最為顯著的,本文給大家分享29個(gè)基于Bootstrap的HT2015-11-19使用純HTML5編寫一款網(wǎng)頁上的時(shí)鐘的代碼分享
這篇文章主要介紹了使用純HTML5編寫一款網(wǎng)頁上的時(shí)鐘的代碼分享,程序非常簡(jiǎn)單且沒有時(shí)鐘上的數(shù)字顯示,純粹體現(xiàn)最基本的設(shè)計(jì)思路,需要的朋友可以參考下2015-11-162014年圣誕節(jié)倒計(jì)時(shí)網(wǎng)頁的制作過程
今天和大家分享一款倒計(jì)時(shí)網(wǎng)頁教程,2014年的圣誕節(jié)即將來臨之季。愛編程小編給大家分享一款2014年圣誕節(jié)倒計(jì)時(shí)網(wǎng)頁,當(dāng)天的日期卡片有抖動(dòng)的效果,需要的朋友可以參考下2014-12-05阻止移動(dòng)設(shè)備(手機(jī)、pad)瀏覽器雙擊放大網(wǎng)頁的方法
這篇文章主要介紹了阻止移動(dòng)設(shè)備(手機(jī)、pad)瀏覽器雙擊放大網(wǎng)頁的方法,需要的朋友可以參考下2014-06-03- 這篇文章主要介紹了為你的html5網(wǎng)頁添加音效示例,需要的朋友可以參考下2014-04-03
編寫html5時(shí)調(diào)試發(fā)現(xiàn)腳本php等網(wǎng)頁js、css等失效
在編寫html5時(shí)簡(jiǎn)單的調(diào)試了下與PHP協(xié)同使用后,發(fā)現(xiàn)在不少情況下js、css等會(huì)失效,調(diào)試后發(fā)現(xiàn)網(wǎng)頁在跳轉(zhuǎn)時(shí)仍有緩存,需要指出原網(wǎng)頁和跳轉(zhuǎn)后網(wǎng)頁的關(guān)系,具體代碼如下2013-12-31HTML5之WebGL 3D概述(上)—WebGL原生開發(fā)開啟網(wǎng)頁3D渲染新時(shí)代
WebGL開啟了網(wǎng)頁3D渲染的新時(shí)代,它允許在canvas中直接渲染3D的內(nèi)容,而不借助任何插件,看到此處是不是感覺特別驚訝啊,WebGL有一個(gè)很好的中文教程,就是下面使用參考中的2013-01-31html5拖曳操作 HTML5實(shí)現(xiàn)網(wǎng)頁元素的拖放操作
HTML5之前,要實(shí)現(xiàn)網(wǎng)頁元素的拖放操作,需要依靠mousedown、mousemove、mouseup等API,通過大量的JS代碼來實(shí)現(xiàn),而如今html5大大簡(jiǎn)化了網(wǎng)頁元素的拖放操作編程難度,API除了2013-01-02- 為了幫助了解當(dāng)今HTML 5的一些新玩意兒,我們現(xiàn)在就進(jìn)入正題,開始使用一些新的結(jié)構(gòu)元素。我們創(chuàng)建HTML 5文檔第一件需要做的事情就是使用新的文檔類型。2010-05-30