小編給大家分享一下HTML5中資源預(yù)加載Link prefetch的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司專注網(wǎng)站設(shè)計(jì),以設(shè)計(jì)驅(qū)動(dòng)企業(yè)價(jià)值的持續(xù)增長,網(wǎng)站，看似簡單卻每一個(gè)企業(yè)都需要——設(shè)計(jì)，看似簡潔卻是每一位設(shè)計(jì)師的心血 10年來，我們只專注做網(wǎng)站。認(rèn)真對待每一個(gè)客戶，我們不用口頭的語言來吹擂我們的優(yōu)秀，超過千家的成功案例見證著我們的成長。

不管是瀏覽器的開發(fā)者還是普通web應(yīng)用的開發(fā)者，他們都在做一個(gè)共同的努力：讓W(xué)eb瀏覽有更快的速度感覺。有很多已知的技術(shù)都可以讓你的網(wǎng)站速度變得更快：使用CSS sprites，使用圖片優(yōu)化工具，使用.htaccess設(shè)置頁面頭信息和緩存時(shí)間，JavaScript壓縮，使用CDN等

我曾經(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ù)讀取一些文檔資源，用戶在將來將會訪問這些資源。一個(gè)Web頁面可以對瀏覽器設(shè)置一系列的預(yù)加載指示，當(dāng)瀏覽器加載完當(dāng)前頁面后，它會在后臺靜悄悄的加載指定的文檔，并把它們存儲在緩存里。當(dāng)用戶訪問到這些預(yù)加載的文檔后，瀏覽器能快速的從緩存里提取給用戶。

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

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

復(fù)制代碼

代碼如下:

<!-- 預(yù)加載整個(gè)頁面 -->
<link rel="prefetch" href="http://www.jb51.net/misc/3d-album/" /></p>
<p><!-- 預(yù)加載一個(gè)圖片 -->
<link rel="prefetch" href=" <a href="http://www.jb51.net/wordpress/">http://www.jb51.net/wordpress/</a>
wp-content/uploads/2014/04/b-334x193.jpg " />

HTML5頁面資源預(yù)加載/預(yù)讀取(Link prefetch)功能是通過Link標(biāo)記實(shí)現(xiàn)的，將rel屬性指定為“prefetch”，在href屬性里指定要加載資源的地址?；鸷鼮g覽器里還提供了一種額外的屬性支持：

復(fù)制代碼

代碼如下:

<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)會污染你的網(wǎng)站訪問量統(tǒng)計(jì)，因?yàn)橛行╊A(yù)加載到瀏覽器的頁面用戶可能并未真正訪問。
3.火狐瀏覽器從2003年開始就已經(jīng)提供了對這項(xiàng)預(yù)加載(Link prefetch)技術(shù)的支持。

利用瀏覽器空閑時(shí)間加載一些額外的資源文件，看起來是既刺激又危險(xiǎn)，你想試試這些技術(shù)嗎？

以上是“HTML5中資源預(yù)加載Link prefetch的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

當(dāng)前文章：HTML5中資源預(yù)加載Linkprefetch的示例分析-創(chuàng)新互聯(lián)
網(wǎng)頁URL：http://chinadenli.net/article20/epsjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、App開發(fā)、關(guān)鍵詞優(yōu)化、App設(shè)計(jì)、網(wǎng)站建設(shè)、全網(wǎng)營銷推廣

廣告

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