前言
由於H5具備 開發週期短、靈活性好 的特點，所以現在Android App大多嵌入了Android Webview組件進行Hybrid開發
但我知道你一定在煩惱Android Webview的性能問題，特別突出的是：加載速度慢 & 消耗流量
今天，我將針對Android Webview的性能問題，提出一些有效解決方案。
目錄
1.WebView的性能問題
1.1 H5頁面加載速度慢
1.1.1 渲染速度慢
前端H5頁面渲染的速度取決於 兩個方面：
Js解析效率
Js本身的解析過程複雜、解析速度不快 & 前端頁面涉及較多JS代碼文件，所以疊加起來會導致Js解析效率非常低
手機硬件設備的性能
由於Android機型碎片化，這導致手機硬件設備的性能不可控，而大多數的Android手機硬件設備無法達到很好很好的硬件性能
總結：上述兩個原因 導致 H5頁面的渲染速度慢。
1.1.2 頁面資源加載緩慢
H5頁面一般會比較多，每加載一個H5頁面，都會產生較多網絡請求，HTML主URL自身的請求，HTML外部引用的JS、CSS、字體文件，圖片也是一個獨立的HTTP請求。
每一個請求都串行的，這麼多請求串起來，這導致H5頁面資源加載緩慢。
1.2 耗費流量
每次使用H5頁面時，用戶都需要重新加載Android WebView的H5頁面，每加載一個H5頁面，都會產生較多網絡請求（上面提到），每一個請求都串行的，這麼多請求串起來，這導致消耗的流量也會越多。
上述問題導致了Android WebView的H5頁面體驗 與 原生Native存在較大差距。
2. WebView網頁緩存
緩存，即離線存儲，這意味着H5網頁 加載後會存儲在緩存區域，在無網絡連接時也可訪問
WebView的本質 = 在Android中嵌入H5頁面，所以，Android WebView自帶的緩存機制其實就是H5頁面的緩存機制
Android WebView除了新的File System緩存機制（H5頁面新加入的緩存機制，後面會進行簡單介紹）還不支持，其他都支持。
Android WebView自帶的緩存機制有5種：
- 瀏覽器 緩存機制
- Application Cache緩存機制
- Dom Storage緩存機制
- Web SQL Database緩存機制
- Indexed Database緩存機制
2.1 瀏覽器緩存機制
根據HTTP協議頭裏的Cache-Control（或Expires）和Last-Modified（或Etag）等字段來控制文件緩存的機制
下面詳細介紹Cache-Control、Expires、Last-Modified&Etag四個字段
Cache-Control：用於控制文件在本地緩存有效時長
如服務器回包：Cache-Control:max-age=600，則表示文件在本地應該緩存，且有效時長是600秒（從發出請求算起）。在接下來600秒內，如果有請求這個資源，瀏覽器不會發出 HTTP 請求，而是直接使用本地緩存的文件。
Expires：與Cache-Control功能相同，即控制緩存的有效時間
Expires是HTTP1.0標準中的字段，Cache-Control 是HTTP1.1標準中新加的字段
當這兩個字段同時出現時，Cache-Control優先級較高
Last-Modified：標識文件在服務器上的最新更新時間
下次請求時，如果文件緩存過期，瀏覽器通過 If-Modified-Since 字段帶上這個時間，發送給服務器，由服務器比較時間戳來判斷文件是否有修改。如果沒有修改，服務器返回304告訴瀏覽器繼續使用緩存；如果有修改，則返回200，同時返回最新的文件。
Etag：功能同Last-Modified，即標識文件在服務器上的最新更新時間。
不同的是，Etag的取值是一個對文件進行標識的特徵字串。
在向服務器查詢文件是否有更新時，瀏覽器通過If-None-Match字段把特徵字串發送給服務器，由服務器和文件最新特徵字串進行匹配，來判斷文件是否有更新：沒有更新回包304，有更新回包200
Etag和Last-Modified可根據需求使用一個或兩個同時使用。兩個同時使用時，只要滿足基中一個條件，就認爲文件沒有更新。
常見用法是：
Cache-Control與Last-Modified一起使用；
Expires與Etag一起使用；
即一個用於控制緩存有效時間，一個用於在緩存失效後，向服務查詢是否有更新
特點
優點：支持Http協議層
不足：緩存文件需要首次加載後纔會產生；瀏覽器緩存的存儲空間有限，緩存有被清除的可能；緩存的文件沒有校驗。
對於解決以上問題，可以參考手 Q 的離線包
應用場景
靜態資源文件的存儲，如` JS、CSS`、字體、圖片等。
Android Webview會將緩存的文件記錄及文件內容會存在當前 app 的 data 目錄中。
具體實現
瀏覽器緩存機制是瀏覽器內核的機制，一般都是標準的實現，即Android WebView內置自動實現。
2.2 Application Cache緩存機制
以文件爲單位進行緩存，且文件有一定更新機制（類似於瀏覽器緩存機制）
AppCache原理有兩個關鍵點：manifest 屬性和 manifest 文件。
HTML 在頭中通過 manifest 屬性引用 manifest 文件
manifest 文件：就是上面以 appcache 結尾的文件，是一個普通文件文件，列出了需要緩存的文件
瀏覽器在首次加載 HTML 文件時，會解析 manifest 屬性，並讀取 manifest 文件，獲取 Section：CACHE MANIFEST 下要緩存的文件列表，再對文件緩存
// 原理說明如下：
AppCache 在首次加載生成後，也有更新機制。被緩存的文件如果要更新，需要更新 manifest 文件
因爲瀏覽器在下次加載時，除了會默認使用緩存外，還會在後臺檢查 manifest 文件有沒有修改（byte by byte)
發現有修改，就會重新獲取 manifest 文件，對 Section：CACHE MANIFEST 下文件列表檢查更新
manifest 文件與緩存文件的檢查更新也遵守瀏覽器緩存機制
如用戶手動清了 AppCache 緩存，下次加載時，瀏覽器會重新生成緩存，也可算是一種緩存的更新
AppCache 的緩存文件，與瀏覽器的緩存文件分開存儲的，因爲 AppCache 在本地有 5MB（分 HOST）的空間限制
特點
方便構建Web App的緩存，專門爲Web App離線使用而開發的緩存機制，AppCache 是對瀏覽器緩存機制的補充。
應用場景
存儲靜態文件（如JS、CSS、字體文件）
具體實現
// 通過設置WebView的settings來實現
WebSettings settings = getSettings();
String cacheDirPath = context.getFilesDir().getAbsolutePath()+"cache/";
settings.setAppCachePath(cacheDirPath);
// 1. 設置緩存路徑
settings.setAppCacheMaxSize(20*1024*1024);
// 2. 設置緩存大小
settings.setAppCacheEnabled(true);
// 3. 開啓Application Cache存儲機制
注意，每個 Application 只調用一次 WebSettings.setAppCachePath() 和WebSettings.setAppCacheMaxSize()
2.3 Dom Storage緩存機制
通過存儲字符串的Key - Value對來提供
DOM Storage分爲sessionStorage&localStorage； 二者使用方法基本相同，區別在於作用範圍不同：
a.sessionStorage：具備臨時性，即存儲與頁面相關的數據，它在頁面關閉後無法使用
b.localStorage：具備持久性，即保存的數據在頁面關閉後也可以使用。
特點
存儲空間大（ 5MB）：存儲空間對於不同瀏覽器不同，如Cookies 才 4KB
存儲安全、便捷：Dom Storage存儲的數據在本地，不需要經常和服務器進行交互
不像Cookies每次請求一次頁面，都會向服務器發送網絡請求
應用場景
存儲臨時、簡單的數據
代替 將 不需要讓服務器知道的信息 存儲到cookies的這種傳統方法
Dom Storage機制類似於Android的SharedPreference機制
具體實現
// 通過設置 `WebView`的`Settings`類實現
WebSettings settings = getSettings();
// 開啓DOM storage
settings.setDomStorageEnabled(true);
2.4 Database緩存機制
基於 `SQL` 的數據庫存儲機制
特點
充分利用數據庫的優勢，可方便對數據進行增加、刪除、修改、查詢
應用場景
存儲適合數據庫的結構化數據
具體實現
// 通過設置WebView的settings實現
WebSettings settings = getSettings();
String cacheDirPath = context.getFilesDir().getAbsolutePath()+"cache/";
settings.setDatabasePath(cacheDirPath);
// 設置緩存路徑
settings.setDatabaseEnabled(true);
// 開啓 數據庫存儲機制
根據官方說明，Web SQL Database存儲機制不再推薦使用（不再維護），取而代之的是IndexedDB緩存機制。
2.5 IndexedDB緩存機制
屬於NoSQL數據庫，通過存儲字符串的Key - Value對來提供
類似於Dom Storage 存儲機制的key-value存儲方式
特點
功能強大、使用簡單，通過數據庫的事務機制進行數據操作，可對對象任何熟悉生成索引，方便查詢。
存儲空間大，默認250MB，比Dom Storage大很多。
使用靈活，以Key-Value的方式存取對象，可以使任何類型值或對象，包括二進制。
異步的API調用，避免造成等待而影響體驗。
應用場景
存儲 複雜、數據量大的結構化數據
具體實現
// 通過設置WebView的settings實現 ，只需設置支持JS就自動打開IndexedDB存儲機制，Android 在4.4開始加入對 IndexedDB 的支持，只需打開允許 JS 執行的開關就好了。
WebSettings settings = getSettings();
settings.setJavaScriptEnabled(true);
2.6 File System
爲H5頁面的數據 提供一個虛擬的文件系統
可進行文件（夾）的創建、讀、寫、刪除、遍歷等操作，就像Native App訪問本地文件系統一樣
虛擬的文件系統是運行在沙盒中
不同WebApp的虛擬文件系統是互相隔離的，虛擬文件系統與本地文件系統也是互相隔離的。
虛擬文件系統提供了兩種類型的存儲空間：臨時 & 持久性：
臨時的存儲空間：由瀏覽器自動分配，但可能被瀏覽器回收
持久性的存儲空間：需要顯式申請；自己管理（瀏覽器不會回收，也不會清除內容）；存儲空間大小通過配額管理，首次申請時會一個初始的配額，配額用完需要再次申請。
特點
可存儲數據體積較大的二進制數據，可預加載資源文件，可直接編輯文件。
應用場景
通過文件系統 管理數據
具體使用
由於File System是H5新加入的緩存機制，所以Android WebView暫時不支持
2.7 緩存機制彙總
3 緩存模式
緩存模式是一種 當加載H5網頁時 該如何讀取之前保存到本地緩存
從而進行使用 的方式
即告訴Android WebView什麼時候去讀緩存，以哪種方式去讀緩存
Android WebView自帶的緩存模式有4種：
// 緩存模式說明:
// LOAD_CACHE_ONLY: 不使用網絡，只讀取本地緩存數據
// LOAD_NO_CACHE: 不使用緩存，只從網絡獲取數據.
// LOAD_DEFAULT: （默認）根據cache-control決定是否從網絡上取數據。
// LOAD_CACHE_ELSE_NETWORK，只要本地有，無論是否過期，或者no-cache，都使用緩存中的數據。
具體使用
WebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);