1. 程式人生 > >H5 快取機制淺析 移動端 Web 載入效能優化

H5 快取機制淺析 移動端 Web 載入效能優化

1 H5 快取機制介紹

H5,即 HTML5,是新一代的 HTML 標準,加入很多新的特性。離線儲存(也可稱為快取機制)是其中一個非常重要的特性。H5 引入的離線儲存,這意味著 web 應用可進行快取,並可在沒有因特網連線時進行訪問。

H5 應用程式快取為應用帶來三個優勢:

  • 離線瀏覽 使用者可在應用離線時使用它們

  • 速度 已快取資源載入得更快

  • 減少伺服器負載 瀏覽器將只從伺服器下載更新過或更改過的資源。

根據標準,到目前為止,H5 一共有6種快取機制,有些是之前已有,有些是 H5 才新加入的。

  1. 瀏覽器快取機制

  2. Dom Storgage(Web Storage)儲存機制

  3. Web SQL Database 儲存機制

  4. Application Cache(AppCache)機制

  5. Indexed Database (IndexedDB)

  6. File System API

下面我們首先分析各種快取機制的原理、用法及特點;然後針對 Anroid 移動端 Web 效能載入優化的需求,看如果利用適當快取機制來提高 Web 的載入效能。

2 H5 快取機制原理分析

2.1 瀏覽器快取機制

瀏覽器快取機制是指通過 HTTP 協議頭裡的 Cache-Control(或 Expires)和 Last-Modified(或 Etag)等欄位來控制檔案快取的機制。這應該是 WEB 中最早的快取機制了,是在 HTTP 協議中實現的,有點不同於 Dom Storage、AppCache 等快取機制,但本質上是一樣的。可以理解為,一個是協議層實現的,一個是應用層實現的。

Cache-Control 用於控制檔案在本地快取有效時長。最常見的,比如伺服器回包:Cache-Control:max-age=600 表示檔案在本地應該快取,且有效時長是600秒(從發出請求算起)。在接下來600秒內,如果有請求這個資源,瀏覽器不會發出 HTTP 請求,而是直接使用本地快取的檔案。

Last-Modified 是標識檔案在伺服器上的最新更新時間。下次請求時,如果檔案快取過期,瀏覽器通過 If-Modified-Since 欄位帶上這個時間,傳送給伺服器,由伺服器比較時間戳來判斷檔案是否有修改。如果沒有修改,伺服器返回304告訴瀏覽器繼續使用快取;如果有修改,則返回200,同時返回最新的檔案。

Cache-Control 通常與 Last-Modified 一起使用。一個用於控制快取有效時間,一個在快取失效後,向服務查詢是否有更新。

Cache-Control 還有一個同功能的欄位:Expires。Expires 的值一個絕對的時間點,如:Expires: Thu, 10 Nov 2015 08:45:11 GMT,表示在這個時間點之前,快取都是有效的。

Expires 是 HTTP1.0 標準中的欄位,Cache-Control 是 HTTP1.1 標準中新加的欄位,功能一樣,都是控制快取的有效時間。當這兩個欄位同時出現時,Cache-Control 是高優化級的。

Etag 也是和 Last-Modified 一樣,對檔案進行標識的欄位。不同的是,Etag 的取值是一個對檔案進行標識的特徵字串。在向伺服器查詢檔案是否有更新時,瀏覽器通過 If-None-Match 欄位把特徵字串傳送給伺服器,由伺服器和檔案最新特徵字串進行匹配,來判斷檔案是否有更新。沒有更新回包304,有更新回包200。Etag 和 Last-Modified 可根據需求使用一個或兩個同時使用。兩個同時使用時,只要滿足基中一個條件,就認為檔案沒有更新。

另外有兩種特殊的情況:

  • 手動重新整理頁面(F5),瀏覽器會直接認為快取已經過期(可能快取還沒有過期),在請求中加上欄位:Cache-Control:max-age=0,發包向伺服器查詢是否有檔案是否有更新。

  • 強制重新整理頁面(Ctrl+F5),瀏覽器會直接忽略本地的快取(有快取也會認為本地沒有快取),在請求中加上欄位:Cache-Control:no-cache(或 Pragma:no-cache),發包向服務重新拉取檔案。

下面是通過 Google Chrome 瀏覽器(用其他瀏覽器+抓包工具也可以)自帶的開發者工具,對一個資原始檔不同情況請求與回包的截圖。

首次請求:200

Vh8bpPi.gif

快取有效期內請求:200(from cache)

q36bsW4.gif

快取過期後請求:304(Not Modified)

xKsdLUS.gif

一般瀏覽器會將快取記錄及快取檔案存在本地 Cache 資料夾中。Android 下 App 如果使用 Webview,快取的檔案記錄及檔案內容會存在當前 app 的 data 目錄中。

分析:Cache-Control 和 Last-Modified 一般用在 Web 的靜態資原始檔上,如 JS、CSS 和一些影象檔案。通過設定資原始檔快取屬性,對提高資原始檔載入速度,節省流量很有意義,特別是行動網路環境。但問題是:快取有效時長該如何設定?如果設定太短,就起不到快取的使用;如果設定的太長,在資原始檔有更新時,瀏覽器如果有快取,則不能及時取到最新的檔案。

Last-Modified 需要向伺服器發起查詢請求,才能知道資原始檔有沒有更新。雖然伺服器可能返回304告訴沒有更新,但也還有一個請求的過程。對於行動網路,這個請求可能是比較耗時的。有一種說法叫“消滅304”,指的就是優化掉304的請求。

抓包發現,帶 if-Modified-Since 欄位的請求,如果伺服器回包304,回包帶有 Cache-Control:max-age 或 Expires 欄位,檔案的快取有效時間會更新,就是檔案的快取會重新有效。304回包後如果再請求,則又直接使用快取檔案了,不再向伺服器查詢檔案是否更新了,除非新的快取時間再次過期。

另外,Cache-Control 與 Last-Modified 是瀏覽器核心的機制,一般都是標準的實現,不能更改或設定。以 QQ 瀏覽器的 X5為例,Cache-Control 與 Last-Modified 快取不能禁用。快取容量是12MB,不分HOST,過期的快取會最先被清除。如果都沒過期,應該優先清最早的快取或最快到期的或檔案大小最大的;過期快取也有可能還是有效的,清除快取會導致資原始檔的重新拉取。

還有,瀏覽器,如 X5,在使用快取檔案時,是沒有對快取檔案內容進行校驗的,這樣快取檔案內容被修改的可能。

分析發現,瀏覽器的快取機制還不是非常完美的快取機制。完美的快取機制應該是這樣的:

  1. 快取檔案沒更新,儘可能使用快取,不用和伺服器互動;

  2. 快取檔案有更新時,第一時間能使用到新的檔案;

  3. 快取的檔案要保持完整性,不使用被修改過的快取檔案;

  4. 快取的容量大小要能設定或控制,快取檔案不能因為儲存空間限制或過期被清除。

    以X5為例,第1、2條不能同時滿足,第3、4條都不能滿足。

在實際應用中,為了解決 Cache-Control 快取時長不好設定的問題,以及為了”消滅304“,Web前端採用的方式是:

  1. 在要快取的資原始檔名中加上版本號或檔案 MD5值字串,如 common.d5d02a02.js,common.v1.js,同時設定 Cache-Control:max-age=31536000,也就是一年。在一年時間內,資原始檔如果本地有快取,就會使用快取;也就不會有304的回包。

  2. 如果資原始檔有修改,則更新檔案內容,同時修改資原始檔名,如 common.v2.js,html頁面也會引用新的資原始檔名。

通過這種方式,實現了:快取檔案沒有更新,則使用快取;快取檔案有更新,則第一時間使用最新檔案的目的。即上面說的第1、2條。第3、4條由於瀏覽器內部機制,目前還無法滿足。

2.2 Dom Storage 儲存機制

DOM 儲存是一套在 Web Applications 1.0 規範中首次引入的與儲存相關的特性的總稱,現在已經分離出來,單獨發展成為獨立的 W3C Web 儲存規範。 DOM 儲存被設計為用來提供一個更大儲存量、更安全、更便捷的儲存方法,從而可以代替掉將一些不需要讓伺服器知道的資訊儲存到 cookies 裡的這種傳統方法。

上面一段是對 Dom Storage 儲存機制的官方表述。看起來,Dom Storage 機制類似 Cookies,但有一些優勢。

Dom Storage 是通過儲存字串的 Key/Value 對來提供的,並提供 5MB (不同瀏覽器可能不同,分 HOST)的儲存空間(Cookies 才 4KB)。另外 Dom Storage 儲存的資料在本地,不像 Cookies,每次請求一次頁面,Cookies 都會發送給伺服器。

DOM Storage 分為 sessionStorage 和 localStorage。localStorage 物件和 sessionStorage 物件使用方法基本相同,它們的區別在於作用的範圍不同。sessionStorage 用來儲存與頁面相關的資料,它在頁面關閉後無法使用。而 localStorage 則持久存在,在頁面關閉後也可以使用。

Dom Storage 提供了以下的儲存介面:

1 2 3 4 5 6 7 8 interface Storage {  readonly attribute unsigned long length;  [IndexGetter] DOMString key(in unsigned long index);  [NameGetter] DOMString getItem(in DOMString key);  [NameSetter] void setItem(in DOMString key, in DOMString data);  [NameDeleter] void removeItem(in DOMString key);  void clear(); };

sessionStorage 是個全域性物件,它維護著在頁面會話(page session)期間有效的儲存空間。只要瀏覽器開著,頁面會話週期就會一直持續。當頁面重新載入(reload)或者被恢復(restores)時,頁面會話也是一直存在的。每在新標籤或者新視窗中開啟一個新頁面,都會初始化一個新的會話。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 // 當頁面重新整理時,從sessionStorage恢復之前輸入的內容 window.onload = 

相關推薦

H5 快取機制淺析 移動 Web 載入效能優化

1 H5 快取機制介紹 H5,即 HTML5,是新一代的 HTML 標準,加入很多新的特性。離線儲存(也可稱為快取機制)是其中一個非常重要的特性。H5 引入的離線儲存,這意味著 web 應用可進行快取,並可在沒有因特網連線時進行訪問。 H5 應用程式快取為

H5 快取機制淺析移動 Web 載入效能優化

1 H5 快取機制介紹 H5,即 HTML5,是新一代的 HTML 標準,加入很多新的特性。離線儲存(也可稱為快取機制)是其中一個非常重要的特性。H5 引入的離線儲存,這意味著 web 應用可進行快取,並可在沒有因特網連線時進行訪問。 H5 應用程式快取為應用帶來三個優勢:

HTML5快取機制淺析移動Web載入效能優化

1. HTML5快取機制介紹 HTML5是新一代的HTML標準,加入很多新的特性。離線儲存(也可稱為快取機制)是其中一個非常重要的特性。HTML5引入的離線儲存,這意味著Web應用可進行快取,並可在沒有因特網連線時進行訪問。 HTML5應用程式快取為應用帶來三個優勢:

攜程移動 UI 介面效能優化實踐

UI 卡頓原理和原因 人類大腦與眼睛對一個畫面的連貫性感知其實是有一個界限的,譬如我們看電影會覺得畫面很自然連貫,其幀率通常為 24fps;那麼,用手機當然也需要感知螢幕操作的連貫性(尤其是動畫過渡),所以在手機領域 Android/iOS 索性就把達到這種流暢的幀率規定

移動WEB開發,click,touch,tap事件淺析

func mousedown spa 手指 滑動 兼容性 over syntax ack 一、click 和 tap 比較 兩者都會在點擊時觸發,但是在手機WEB端,click會有 200~300 ms,所以請用tap代替click作為點擊事件。 singleTap和dou

fastclick.js移動WEB開發,click,touch,tap事件淺析

                     一、click 和 tap 比較兩者都會在點選時觸發,但是在手機WEB端,click會有 200~300 ms,所以請用tap代替click作為點選事件。singleTap和doubleTap 分別代表單次點選和雙次點選。二、關於tap的點透處理在使用zepto框架的

H5手機移動WEB開發資源整合 常用的標籤及注意事項

meta基礎知識 H5頁面視窗自動調整到裝置寬度,並禁止使用者縮放頁面 <metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum

關於移動web開發的真機測試

install 相對 同步 css 響應 .html http bsp 關於 五月已經過去一大半了,心情不太好,因為太困沒狀態,所以剛剛去跑了好幾圈,心情終於沒那麽郁悶了,來吧,今天要記錄的是在做移動端網頁時如何真機測試。 網上方法有很多,我就掌握一個就夠了<攤手&g

傾力總結40條常見的移動Web頁面問題解決方案

web dropdown 文本 ie瀏覽器 -c cti nbsp name oct 1、安卓瀏覽器看背景圖片,有些設備會模糊。 用同等比例的圖片在PC機上很清楚,但是手機上很模糊,原因是什麽呢? 經過研究,是devicePixelRatio作怪,因為手機分辨率太小

移動web頭像上傳實現截取和照片方向修復

trac 支持 隱藏 gre jquery 頭像 圖像加載 fun 僅供參考 實戰所需js包: jQuery、Jcrop、EXIF 本次實戰功能是在 app 中的 我的客戶 的客戶信息頁面中實現移動端web的頭像上傳,本次沒有實現圖像拖拽、縮放的觸摸事件功能(Jcro

移動web開發進階

page 提升 最終 好玩的 ini 進階 body user hang posted @ 2014-11-24 20:09 vajoy 閱讀(4708) 評論(12) 編輯 收藏 三個月前曾寫過一篇跨終端響應式頁面設計入門的博客,上了博客園頭條也得到了不少關註

移動web開發框架

加載 數據庫服務器 dom操作 spl 應用服務器 左右 pri tail 下拉 一、目前移動端布局方法 兩個基本規則:移動優先,設計初期就要考慮設計的頁面如何多終端顯示。漸進增強,充分發揮硬件設備的最大功能。 三個常用方法: 1)css3-media Q

移動web開發常見問題------彭記(023)

方式 方案 產生 按鈕 適用於 效果 sap javascrip -a Meta相關 1. 添加到主屏後的標題(IOS) <meta name="apple-mobile-web-app-title" content="標題"> 2. 啟用 WebApp 全

移動 Web 頁 input 控制軟鍵盤

utm 填寫信息 web前端 忽略 瀏覽器中 cnblogs click 折騰 quest 從交互層面上來講,完成一個功能(獲得想要的信息)的過程稱之為用戶路徑。用戶路徑越長,完成功能的復雜度就越高,用戶體驗也就越差。因此當打開一個需要用戶填寫信息的表單界面時,為了提高可用

移動web頁面input限制只能輸入數字

字段 數字 arp 設置 輸入 inpu highlight ios端 web頁面 <input type="number" pattern="[0-9]*" /> 如上所示,在安卓端設置input類型為number,可限制鍵盤只輸入數字,在ios端,要

移動web,tap與click事件

document 解決 取消 list 所有 ons scrip 還要 時間 一、tap與click的區別 兩者都會在點擊時系統自動觸發,但是在手機WEB端,click會有 200~300 ms。延遲來自判斷雙擊和長按,因為只有默認等待時間結束以確定沒有後續動作發生時,才

移動web頁面滾動不流暢,卡頓閃爍解決方案

方案 代碼 osi col 實現 移動端 ios端 出現 問題: 1.ios端的-webkit-overflow-scrolling屬性可控制頁面滾動效果,設置如下實現慣性滾動和彈性效果: -webkit-overflow-scrolling: touch 2.posi

移動web開發初探之Vuejs的簡單實戰

參考 細節 重要 進行 標簽 樣式 mob 優化 view 這段時間在做的東西,是北郵人論壇APP的註冊頁。這個註冊頁是內嵌的網頁,因為打算安卓和IOS平臺同時使用。因此實際上就是在做移動端的web開發了。 在這過程中遇到了不少有意思的東西。 DEMO的github地址在這

移動web開發

等於 精靈 spa 文件 最大 基本點 初始化 比例 放置 1、無論是PC端還是移動端,開發出來的頁面都是運行在瀏覽器上的; 2、移動端設備的瀏覽器大多是基於webkit內核,屬於高級瀏覽器 支持H5 C3特性; 視口概念 ①: PC端視口取決於瀏覽器大小(HTML)-

移動web頁面開發常用的頭部標簽設置

-h 方法 sca style 縮小 ipad edge 數字識別 ios 在移動端web頁面開發中,我們常需要設置各種頭部標簽以幫助瀏覽器更好的解析頁面,將頁面完美呈現,這裏列出了工作中常用的各種頭部標簽,以備查詢。 viewport <meta name=&quo