主頁 > 知識庫 > HTML5 預(yù)加載讓頁面得以快速呈現(xiàn)

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

熱門標簽:咸陽穩(wěn)定外呼系統(tǒng)軟件 地圖標注柱狀圖 四川移動電銷外呼客戶管理系統(tǒng) 小朱地圖標注 臨海地圖標注app 怎么做百度地圖標注 百度地圖標注為什么總是封號 智能芯電話機器人 400開頭的電話好申請不
瀏覽器廠商和開發(fā)者之間共同努力的一個方向就是讓網(wǎng)站更快?,F(xiàn)在已有很多廣為人知的加速解決方案:CSS sprites(CSS精靈,拼圖)以及圖像優(yōu)化,分布式配置文件(.htaccess),JS/文本文件壓縮,CDN加速等。

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

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

簡單概述:網(wǎng)站根據(jù)用戶分析,讓瀏覽器后臺下載指定頁面/文檔/圖片,實現(xiàn)起來超easy:

HTML5預(yù)加載標簽

復(fù)制代碼
代碼如下:

<!-- 頁面,可以使用絕對或者相對路徑 -->
<link rel="prefetch" href="page2.html" />
<!-- 圖片,也可以是其他類型的文件 -->
<link rel="prefetch" href="sprite.png" />


從上面的HTML代碼可以看出,預(yù)加載使用 <link> 標簽,并指定 rel="prefetch" 屬性,而href屬性就是需要預(yù)加載的文件路徑。而Mozilla還實現(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é)議也同樣支持。

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

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

復(fù)制代碼
代碼如下:

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

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

標簽:平頂山 黃石 陜西 黃石 公主嶺 山南 南平

巨人網(wǎng)絡(luò)通訊聲明:本文標題《HTML5 預(yù)加載讓頁面得以快速呈現(xiàn)》,本文關(guān)鍵詞  HTML5,預(yù),加載,讓,頁面,得以,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《HTML5 預(yù)加載讓頁面得以快速呈現(xiàn)》相關(guān)的同類信息!
  • 本頁收集關(guān)于HTML5 預(yù)加載讓頁面得以快速呈現(xiàn)的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章