什么是HTML5資源預(yù)加載-創(chuàng)新互聯(lián)

這篇文章主要講解了“什么是HTML5資源預(yù)加載”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“什么是HTML5資源預(yù)加載”吧!

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

我曾經(jīng)介紹過本站上使用的一些速度優(yōu)化技術(shù)。而在HTML5里,出現(xiàn)了一個新的用來優(yōu)化網(wǎng)站速度的新功能:頁面資源預(yù)加載/預(yù)讀取(Link prefetch)。

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

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

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

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



代碼如下:

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


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



代碼如下:


<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ù)加載頁面資源

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

1.當(dāng)頁面有幻燈片類似的服務(wù)時,預(yù)加載/預(yù)讀取接下來的1-3頁和之前的1-3頁。
2.預(yù)加載那些整個網(wǎng)站通用的圖片。
3.預(yù)加載網(wǎng)站上搜索結(jié)果的下一頁。

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

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

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

下面是一些關(guān)于頁面資源預(yù)加載(Link prefetch)的注意事項:

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

感謝各位的閱讀,以上就是“什么是HTML5資源預(yù)加載”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對什么是HTML5資源預(yù)加載這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司,,小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!

本文標(biāo)題:什么是HTML5資源預(yù)加載-創(chuàng)新互聯(lián)
標(biāo)題來源:http://muchs.cn/article8/pgeip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供標(biāo)簽優(yōu)化、電子商務(wù)移動網(wǎng)站建設(shè)、小程序開發(fā)、App開發(fā)營銷型網(wǎng)站建設(shè)

廣告

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

成都定制網(wǎng)站網(wǎng)頁設(shè)計