2. 程式人生 > >H5 緩存機制解析

H5 緩存機制解析

阿新 • • 發佈：2018-06-29
dts 頁緩存 css locals 完成 它的 地址 忽略 ole

線上項目需要更新一個有問題的資源（可能是圖片，js，css,json數據等）,這個資源已經發布了很長一段時間，為什麽頁面在瀏覽器裏打開還是沒有看到更新？

有些web開發經驗的同學應該馬上會想到，可能是資源發布出了岔子導致沒有實際發布成功，更大的可能是老的資源被緩存了。說到web緩存，首先我們要弄清它是什麽。Web緩存可以理解為Web資源在Web服務器和客戶端（瀏覽器）的副本，其作用體現在減少網絡帶寬消耗、降低服務器壓力和減少網絡延遲，加快頁面打開速度等方面(筆者在香港求學期間看到港臺地區將cache譯為“快取”，除了讀音相近，大概就是貼近這層含義)。他們通常還會告訴你：ctrl+F5強刷一下，但是本文下面的內容將會說明為什麽強制刷新在去除緩存上不總是能奏效的

，更何況對於線上項目而言，總不能讓所有已經訪問過的用戶擼起袖子岔開兩個手指都強制刷新一下吧？

同時，當前原生 + html5的混合模式移動應用(hybrid APP)因可大幅降低移動應用的開發成本，並且可在用戶桌面形成獨立入口以及有接近原生應用的體驗而大行其道，APP內嵌h5應用的開發也是本人現在工作內容重要的一部分，本文將從實際項目開發中遇到的問題出發，一窺html5和app內webview的緩存機制真容。

一、協議緩存

回到開頭的那個問題，更新了一張圖片，發布之後反復重新進頁面總是看不到更新，這是為什麽呢？

這裏我們假設已經排除了資源沒有發布成功過的情況，那麽第一步，我們可能會認為是http協議緩存（也稱為瀏覽器緩存或者網頁緩存）。

http協議緩存機制是指通過 HTTP 協議頭裏的 Cache-Control（或 Expires）和 Last-Modified（或 Etag）等字段來控制文件緩存的機制。

  • 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 可根據需求使用一個或兩個同時使用。兩個同時使用時，只要滿足基中一個條件，就認為文件沒有更新。

一個比較形象的理解：

翠花：狗蛋，你幾歲了？
狗蛋：我18歲了。(200)
翠花記住了狗蛋18歲(200 from cache)

=================================

翠花：狗蛋 ，你幾歲了？我猜你18歲。
狗蛋：靠，知道還問我!（304）

=================================

翠花：狗蛋 ，你幾歲了？我猜你18歲。
狗蛋：翠花 ，我已經19歲了。（200）

不過有兩種情況比較特殊：

  1. 手動刷新頁面（F5)，瀏覽器會直接認為緩存已經過期（可能緩存還沒有過期），在請求中加上字段：Cache-Control:max-age=0，發包向服務器查詢是否有文件是否有更新。

  2. 強制刷新頁面（Ctrl+F5)，瀏覽器會直接忽略本地的緩存（有緩存也會認為本地沒有緩存），在請求中加上字段：Cache-Control:no-cache（或 Pragma:no-cache），發包向服務重新拉取文件。

當然，各個瀏覽器對於刷新和強制刷新的實現方式也有一些區別。

那麽，如果線上更新了web資源，如何能讓盡快更新呢？（要知道像圖片這樣比較少更新的資源一般緩存時間都設置得比較長，比如game.gtimg.cn域名下是一天，有問題的圖片在用戶側緩存這麽長時間是不可接受的）

方法一 修改請求header頭，比如php添加：

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");

方法二 修改html的head塊：

<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
<META HTTP-EQUIV="expires" CONTENT="0">

方法三：添加隨機參數：

對於圖片或者css，可使用如下方式：

<img src="./data/avatar_mingpian_bak.jpg?rand=h9xqeI"  width="156" height="98">

對於js則可以直接使用時間戳：

<script language="javascript" src="UILib/Common/Common.js?time=new Date()">

二、應用緩存

除了http協議緩存，HTML5 提供一種應用程序緩存機制，使得基於web的應用程序可以離線運行。為了能夠讓用戶在離線狀態下繼續訪問 Web 應用，開發者需要提供一個 cache manifest 文件。這個文件中列出了所有需要在離線狀態下使用的資源，瀏覽器會把這些資源緩存到本地。例如以下頁面：

<!-- calender.html -->
<!DOCTYPE HTML>
<html manifest="calender.manifest">
<head>
   <title>calender</title>
   <script src="calender.js"></script>
   <link rel="stylesheet" href="calender.css">
</head>
<body>
   <p>The time is: <output id="calender"></output></p>
</body>
</html>

其對應的 calender.manifest代碼

CACHE MANIFEST
calender.html
calender.css
calender.js

cache manifest 格式遵循以下原則：

  1. 首行必須是 CACHE MANIFEST。
  2. 其後，每一行列出一個需要緩存的資源文件名。
  3. 可根據需要列出在線訪問的白名單。白名單中的所有資源不會被緩存，在使用時將直接在線訪問。聲明白名單使用 NETWORK：標識符。
  4. 如果在白名單後還要補充需要緩存的資源，可以使用 CACHE：標識符。
  5. 如果要聲明某 URI 不能訪問時的替補 URI，可以使用 FALLBACK：標識符。其後的每一行包含兩個 URI，當第一個 URI 不可訪問時，瀏覽器將嘗試使用第二個 URI。
  6. 註釋要另起一行，以 # 號開頭。

例如以下manifest文件：

CACHE MANIFEST
# 上一行是必須書寫
images/sound-icon.png
images/background.png
NETWORK:
comm.cgi
# 下面是另一些需要緩存的資源，在這個示例中只有一個 css 文件。
CACHE:
style/default.css
FALLBACK:
/files/projects /projects

那麽，如果使用了應用緩存，應該如何去更新呢？有以下兩種方式

1、自動更新

瀏覽器除了在第一次訪問 Web 應用時緩存資源外，只會在 cache manifest 文件本身發生變化時更新緩存。而 cache manifest 中的資源文件發生變化並不會觸發更新。

2、手動更新

開發者也可以使用 window.applicationCache 的接口更新緩存。方法是檢測 window.applicationCache.status 的值，如果是 UPDATEREADY，那麽可以調用 window.applicationCache.update() 更新緩存。示範代碼如下。

手動更新緩存代碼：

if(window.applicationCache.status== window.applicationCache.UPDATEREADY)
｛
 window.applicationCache.update();
｝

然而，有時候雖然應用緩存刷新了，但是還是不能看到最新的：那麽有可能是使用了本地存儲。常用的本地存儲有DOM Storage和webSQL和indexDB三種

，細節可以參考這篇文章《HTML5 Storage Wars - localStorage vs. IndexedDB vs. Web SQL》，這裏就不展開了，需要註意的是，若使用本地存儲，想要清理緩存，除了清理本地存儲文件外，還需要重啟APP，以消除內存中的備份。

至此，一個完成的流程圖就出來了：

技術分享圖片

三、移動端APP如何支持html5緩存機制？

筆者現在常會和移動端APP內嵌html5頁面打交道，那麽移動端hybrid方式開發的APP，如何支持以上的緩存方式呢？

需要了解這些，我們先了解下hybrid方式開發的APP怎麽展示網頁。簡單得說就是使用了webView，那麽什麽是webView呢？WebView是手機中內置了一款高性能webkit 內核瀏覽器,在SDK 中封裝的一個組件。 沒有提供地址欄和導航欄，WebView只是單純的展示一個網頁界面。簡單地可以理解為簡略版的瀏覽器。

安卓端：

1、網頁緩存：

在data/應用package下生成database與cache兩個文件夾，請求的Url記錄是保存在webviewCache.db裏，而url的內容是保存在webviewCache文件夾下。

<1> 緩存構成

/data/data/package_name/cache/
/data/data/package_name/database/webview.db
/data/data/package_name/database/webviewCache.db

<2> 緩存模式

  • LOAD_CACHE_ONLY： 不使用網絡，只讀取本地緩存數據，
  • LOAD_DEFAULT：根據cache-control決定是否從網絡上取數據，
  • LOAD_CACHE_NORMAL：API level 17中已經廢棄, 從API level 11開始作用同- - LOAD_DEFAULT模式，
  • LOAD_NO_CACHE: 不使用緩存，只從網絡獲取數據，
  • LOAD_CACHE_ELSE_NETWORK，只要本地有，無論是否過期，或者no-cache，都使用緩存中的數據。

如果一個頁面的cache-control為no-cache，在模式LOAD_DEFAULT下，無論如何都會從網絡上取數據，如果沒有網絡，就會出現錯誤頁面；在LOAD_CACHE_ELSE_NETWORK模式下，無論是否有網絡，只要本地有緩存，都使用緩存。本地沒有緩存時才從網絡上獲取。如果一個頁面的cache-control為max-age=60，在兩種模式下都使用本地緩存數據。

2、應用緩存

根據setAppCachePath(String appCachePath)提供的路徑，在H5使用緩存過程中生成的緩存文件。

無模式選擇，通過setAppCacheEnabled(boolean flag)設置是否打開。默認關閉，即，H5的緩存無法使用。如果要手動清理緩存，需要找到調用setAppCachePath(String appCachePath)設置緩存的路徑，把它下面的文件全部刪除就OK了。

iOS端：

iOS的UIWebView組件不支持html5應用程序緩存的方式，對於協議緩存，可以使用sdk中的NSURLCache類。NSURLRequest需要一個緩存參數來說明它請求的url何如緩存數據的，我們先看下它的CachePolicy類型。

  1. NSURLRequestUseProtocolCachePolicy NSURLRequest 默認的cache policy，使用Protocol協議定義，註意這種情況下默認緩存時間是60s
  2. NSURLRequestReloadIgnoringCacheData 忽略緩存直接從原始地址下載。
  3. NSURLRequestReturnCacheDataElseLoad 只有在cache中不存在data時才從原始地址下載。
  4. NSURLRequestReturnCacheDataDontLoad 只使用cache數據，如果不存在cache，請求失敗；用於沒有建立網絡連接離線模式；
  5. NSURLRequestReloadIgnoringLocalAndRemoteCacheData：忽略本地和遠程的緩存數據，直接從原始地址下載，與NSURLRequestReloadIgnoringCacheData類似。
  6. NSURLRequestReloadRevalidatingCacheData:驗證本地數據與遠程數據是否相同，如果不同則下載遠程數據，否則使用本地數據。

處於數據安全性的考慮，IOS的應用擁有自己獨立的目錄，用來寫入應用的數據或者首選項參數。應用安裝後，會有對應的home目錄，基於NSURLCache來實現數據的Cache，NSURLCache會存放在home內的子目錄Library/ Caches下，以Bundle Identifier為文件夾名建立Cache的存放路徑。在xcode下可以管理對應的文件，具體可以參見此文：《關於 iOS 刪除緩存的那些事兒》

四、總結

綜上所述，html5緩存主要可以分為http協議緩存、應用緩存、DOM Storage、webSQL和indexedDB幾種方式，針對不同的方式清理緩存的方式也不盡相同，上文中都有說明。同時，在移動端webView層，對html緩存機制做了支持（從筆者接觸過的手遊和相關APP來看，目前使用默認緩存機制的比較多），項目開發過程中緩存更新和清理方式也需要有針對性地選擇使用。

本文來自於騰訊Bugly公眾號（weixinBugly），未經作者同意，請勿轉載，原文地址：https://mp.weixin.qq.com/s/qHm_dJBhVbv0pJs8Crp77w

作者：葉建升
個人主頁：http://www.linkedin.com/in/jiansheng-ye-b3319778/

H5 緩存機制解析

相關推薦

H5 緩存機制解析

dts 頁緩存 css locals 完成 它的 地址 忽略 ole 線上項目需要更新一個有問題的資源（可能是圖片，js，css,json數據等）,這個資源已經發布了很長一段時間，為什麽頁面在瀏覽器裏打開還是沒有看到更新？ 有些web開發經驗的同學應該馬上會想到，可能是資源

【轉】徹底解析Android緩存機制——LruCache

如何 優先 nbsp cor gem dHash 之前 指定 保持 徹底解析Android緩存機制——LruCache 關於Android的三級緩存，其中主要的就是內存緩存和硬盤緩存。這兩種緩存機制的實現都應用到了LruCache算法，

緩存機制與局部性原理

緩存命中 存儲 讀寫 依賴 速度 網絡 表現 二維數組 文件 http://www.cnblogs.com/jqctop1/p/4714116.html 1. 局部性原理 局部性原理是指計算機在執行某個程序時，傾向於使用最近使用的數據。局部性原理有兩種表現形式：時間局部

Hibernate 緩存機制淺析

sa1. 為什麽要用 Hibernate 緩存？ Hibernate是一個持久層框架，經常訪問物理數據庫。 為了降低應用程序對物理數據源訪問的頻次，從而提高應用程序的運行性能。 緩存內的數據是對物理數據源中的數據的復制，應用程序在運行時從緩存讀寫數據，在特定的時刻或事件會同步緩存和物理數據源的數據

mybatis 之緩存機制

二級緩存 一級緩存 mybatis 緩存機制 cache標簽 sqlsession 級別的緩存 1、緩存機制的簡單介紹： a、MyBatis 包含一個非常強大的查詢緩存特性，它可以非常方便地配置和定制。緩存可以極大的提升查詢效率。 b、MyBatis 系統中默認定義了兩

Android性能優化之ListView緩存機制

ner data b2c 模式 ret hold ren state err 要想優化ListView首先要了解它的工作原理，列表的顯示須要三個元素：ListView、Adapter、顯示的數據。 這裏的Adapter就是用到了適配器模式，無論傳入的是什麽View在Li

Bitmap緩存機制

mean set wake instance ads images obj hat 內存大小 Bitmap緩存機制 載入一個bitmap到UI裏面比較簡單直接。可是，假設我們一次載入大量的bitmap數據的時候就變得復雜了。很多情況下（比方這些組件：ListVIe

九種瀏覽器端緩存機制知多少（轉）

調用 內容 list content rect 本地 成功 asc 技術 瀏覽器緩存（Browser Caching）是瀏覽器端保存數據用於快速讀取或避免重復資源請求的優化機制，有效的緩存使用可以避免重復的網絡請求和瀏覽器快速地讀取本地數據，整體上加速網頁展示給用戶。瀏覽器

大規模網站架構的緩存機制

這樣的 實踐 未來 time 部署 star 命中率 手機瀏覽 產生 【問底】徐漢彬：大規模網站架構的緩存機制和幾何分形學 發表於16小時前|1796次閱讀| 來源CSDN|10 條評論| 作者徐漢彬 問底CDN緩存徐漢彬 摘要：緩存機制簡單總結可以說是空間換時間，被用於

Shiro學習（11）緩存機制

values next() app uri 如果 itl apache 依賴 nag Shiro提供了類似於spring的Cache抽象，即Shiro本身不實現Cache，但是對Cache進行了又抽象，方便更換不同的底層Cache實現。對於Cache的一些概念可以參考我的《

php利用ob緩存機制實現頁面靜態化方法全解

常用函數 http協議 一個 src names too req 文件是否存在 復制 首先介紹一下php中ob緩存常用到的幾個常用函數 ob_start（）：開啟緩存機制 ob_get_contents（）：獲取ob緩存中的內容 ob_clean（）清除ob緩存中的內容，但

hibernate緩存機制詳細分析

provide home property 指定 當我 seconds idle eat its 在本篇隨筆裏將會分析一下hibernate的緩存機制，包括一級緩存(session級別)、二級緩存(sessionFactory級別)以及查詢緩存，當然還要討論下我們的N+1的

http緩存機制

定期 sin 轉發 重復 才會 定義 ron 開發者 利用 在web開發過程中，緩存是老生常談的一個話題。本文從緩存的定義、作用、分類、機制等方面介紹http緩存及其原理。希望能對大家有所幫助，如有紕漏，還請提出指正。 什麽是web緩存 　　根據MDN上的解釋，緩存是指存儲

linux學習之緩存機制

page sysctl 同時 進行 一定的 緩沖區 調用次數 pro 使用 linux中的緩存機制 在Linux系統中，為了提高文件系統性能，內核利用一部分物理內存分配出緩沖區，用於緩存系統操作和數據文件，當內核收到讀寫的請求時，內核先去緩存區找是否有請求的數據，有就直接返

Map實現java緩存機制的簡單實例

個數 charset shm run 測試的 分享 初始化 tty tco 緩存是Java中主要的內容，主要目的是緩解項目訪問數據庫的壓力以及提升訪問數據的效率，以下是通過Map實現java緩存的功能，並沒有用cache相關框架。 一、緩存管理類 CacheMgr.java

mybatis的緩存機制

span 多表 緩存 操作 style 目的 clas batis mybatis 在實際項目中，通常對數據庫查詢的性能要求很高，而MyBatis提供了查詢緩存來緩存數據，從而達到提高性能的要求。 MyBatis的查詢緩存分為一級緩存和二級緩存。一級緩存是sqlsessio

MyBatis-緩存機制

employ pre 查詢信息 ear lec 先進先出 temp code test MyBatis 包含一個非常強大的查詢緩存特性,它可以非常方便地配置和定制。緩存可以極大的提升查詢效率。 MyBatis系統中默認定義了兩級緩存。 一級緩存和二級緩存。 一級緩存

關於億級流量網站架構一書緩存機制的探討

obj dpa array ride 定義 from 有客 build 遠程 在京東的億級流量網站架構一書，175頁介紹緩存有這樣一段話 僅就這段代碼來看，在高並發情況下，實際上並不能阻止大量線程調用loadSync函數 當然這個書裏的代碼是作者的簡寫，這裏探討只是針對書

html緩存機制，http頭部控制

請求 緩存機制 http nbsp oct 讀取 重新發送 res 過期 1.緩存分類：服務器緩存，第三方緩存，瀏覽器緩存 2.瀏覽器緩存，設置請求指定的http頭部信息。 3.http頭部屬性 　　Expires:設置緩存時間(某一個時間點)，時間過了就重新發送請

瀏覽器 HTTP 協議緩存機制詳解

blank 設置 響應頭 tag ble 1.0 強制 pri follow 1、緩存的分類 2、瀏覽器緩存機制詳解 2.1 HTML Meta標簽控制緩存 2.2 HTTP頭信息控制緩存 2.2.1 瀏覽器請求流程 2.2.2 幾個重要概念解釋 3、用戶行為與緩存 4