前言
由于H5具備 開發(fā)周期短、靈活性好 的特點距贷，所以現(xiàn)在Android App大多嵌入了Android Webview組件進(jìn)行Hybrid開發(fā)
但我知道你一定在煩惱Android Webview的性能問題相叁，特別突出的是：加載速度慢 & 消耗流量
今天遵绰，我將針對Android Webview的性能問題，提出一些有效解決方案增淹。
1. Android WebView 存在什么性能問題椿访？
Android WebView里H5頁面加載速度慢
耗費(fèi)流量
下面會詳細(xì)介紹。
下面會詳細(xì)介紹：
前端H5頁面渲染的速度取決于 兩個方面：
Js解析效率
Js本身的解析過程復(fù)雜虑润、解析速度不快 & 前端頁面涉及較多JS代碼文件成玫，所以疊加起來會導(dǎo)致Js解析效率非常低
手機(jī)硬件設(shè)備的性能
由于Android機(jī)型碎片化，這導(dǎo)致手機(jī)硬件設(shè)備的性能不可控拳喻，而大多數(shù)的Android手機(jī)硬件設(shè)備無法達(dá)到很好很好的硬件性能
總結(jié)：上述兩個原因 導(dǎo)致H5頁面的渲染速度慢哭当。
H5頁面從服務(wù)器獲得，并存儲在Android手機(jī)內(nèi)存里：
H5頁面一般會比較多
每加載一個H5頁面冗澈，都會產(chǎn)生較多網(wǎng)絡(luò)請求：
HTML主URL自身的請求钦勘；
HTML外部引用的JS、CSS亚亲、字體文件彻采，圖片也是一個獨(dú)立的HTTP請求
每一個請求都串行的腐缤，這么多請求串起來，這導(dǎo)致H5頁面資源加載緩慢
總結(jié)：H5頁面加載速度慢的原因：渲染速度慢 & 頁面資源加載緩慢 導(dǎo)致肛响。
每次使用H5頁面時岭粤，用戶都需要重新加載Android WebView的H5頁面
每加載一個H5頁面，都會產(chǎn)生較多網(wǎng)絡(luò)請求（上面提到）
每一個請求都串行的终惑，這么多請求串起來绍在，這導(dǎo)致消耗的流量也會越多
綜上所述，產(chǎn)生Android WebView性能問題主要原因是：
上述問題導(dǎo)致了Android WebView的H5頁面體驗 與 原生Native存在較大差距雹有。
針對上述androidWebView的性能問題偿渡，我提出了兩種解決方案：
使用Android WebView自身的緩存機(jī)制
自身構(gòu)建緩存機(jī)制（主要是H5頁面資源的預(yù)加載）
下面我將詳細(xì)介紹。
定義
緩存霸奕，即離線存儲
這意味著H5網(wǎng)頁 加載過之后會存儲在緩存區(qū)域溜宽，在沒有網(wǎng)絡(luò)連接時也可以進(jìn)行訪問
作用
離線瀏覽：用戶可在沒有網(wǎng)絡(luò)連接時進(jìn)行H5頁面訪問
提高頁面加載速度 & 減少流量消耗：直接使用已緩存的資源，不需要重新加載
具體應(yīng)用
此處講解主要講解Android WebView的緩存機(jī)制 & 緩存模式 ：
a. 緩存機(jī)制：如何將加載過的網(wǎng)頁數(shù)據(jù)保存到本地
b. 緩存模式：加載網(wǎng)頁時如何讀取之前保存到本地的網(wǎng)頁緩存
前者是保存质帅，后者是讀取适揉，請注意區(qū)別
Android WebView的本質(zhì)：在Android 中嵌入H5頁面
所以，Android WebView自帶的緩存機(jī)制其實就是H5頁面的緩存機(jī)制
Android WebView除了新的File System緩存機(jī)制還不支持煤惩，其他都支持嫉嘀。
Android WebView自帶的緩存機(jī)制有5種：
瀏覽器 緩存機(jī)制
Application Cache緩存機(jī)制
Dom Storage緩存機(jī)制
Web SQL Database緩存機(jī)制
Indexed Database緩存機(jī)制
File System緩存機(jī)制（H5頁面新加入的緩存機(jī)制，雖然Android WebView暫時不支持魄揉，但會進(jìn)行簡單介紹）
下面將詳細(xì)介紹每種緩存機(jī)制剪侮。
根據(jù)HTTP協(xié)議頭里的Cache-Control（或Expires）和Last-Modified（或Etag）等字段來控制文件緩存的機(jī)制
下面詳細(xì)介紹Cache-Control、Expires洛退、Last-Modified&Etag四個字段
Cache-Control：用于控制文件在本地緩存有效時長
如服務(wù)器回包：Cache-Control:max-age=600瓣俯，則表示文件在本地應(yīng)該緩存，且有效時長是600秒（從發(fā)出請求算起）兵怯。在接下來600秒內(nèi)彩匕，如果有請求這個資源，瀏覽器不會發(fā)出 HTTP 請求媒区，而是直接使用本地緩存的文件驼仪。
Expires：與Cache-Control功能相同，即控制緩存的有效時間
Expires是HTTP1.0標(biāo)準(zhǔn)中的字段袜漩，Cache-Control 是HTTP1.1標(biāo)準(zhǔn)中新加的字段
當(dāng)這兩個字段同時出現(xiàn)時谅畅，Cache-Control優(yōu)先級較高
Last-Modified：標(biāo)識文件在服務(wù)器上的最新更新時間
下次請求時，如果文件緩存過期噪服，瀏覽器通過 If-Modified-Since 字段帶上這個時間毡泻，發(fā)送給服務(wù)器，由服務(wù)器比較時間戳來判斷文件是否有修改粘优。如果沒有修改仇味，服務(wù)器返回304告訴瀏覽器繼續(xù)使用緩存呻顽；如果有修改，則返回200丹墨，同時返回最新的文件廊遍。
Etag：功能同Last-Modified，即標(biāo)識文件在服務(wù)器上的最新更新時間贩挣。
不同的是喉前，Etag的取值是一個對文件進(jìn)行標(biāo)識的特征字串。
在向服務(wù)器查詢文件是否有更新時王财，瀏覽器通過If-None-Match字段把特征字串發(fā)送給服務(wù)器卵迂，由服務(wù)器和文件最新特征字串進(jìn)行匹配，來判斷文件是否有更新：沒有更新回包304绒净，有更新回包200
Etag和Last-Modified可根據(jù)需求使用一個或兩個同時使用见咒。兩個同時使用時，只要滿足基中一個條件挂疆，就認(rèn)為文件沒有更新改览。
常見用法是：
Cache-Control與Last-Modified一起使用；
Expires與Etag一起使用缤言；
即一個用于控制緩存有效時間宝当，一個用于在緩存失效后，向服務(wù)查詢是否有更新
特別注意：瀏覽器緩存機(jī)制 是 瀏覽器內(nèi)核的機(jī)制胆萧，一般都是標(biāo)準(zhǔn)的實現(xiàn)
即Cache-Control今妄、Last-Modified、Expires鸳碧、Etag都是標(biāo)準(zhǔn)實現(xiàn)，你不需要操心
優(yōu)點：支持Http協(xié)議層
不足：緩存文件需要首次加載后才會產(chǎn)生犬性；瀏覽器緩存的存儲空間有限瞻离，緩存有被清除的可能；緩存的文件沒有校驗乒裆。
對于解決以上問題套利，可以參考手 Q 的離線包
靜態(tài)資源文件的存儲，如` JS鹤耍、CSS`肉迫、字體、圖片等稿黄。
Android Webview會將緩存的文件記錄及文件內(nèi)容會存在當(dāng)前 app 的 data 目錄中喊衫。
`Android WebView`內(nèi)置自動實現(xiàn)，即不需要設(shè)置即實現(xiàn)
Android4.4后的WebView瀏覽器版本內(nèi)核：Chrome
瀏覽器緩存機(jī)制 是 瀏覽器內(nèi)核的機(jī)制杆怕，一般都是標(biāo)準(zhǔn)的實現(xiàn)
以文件為單位進(jìn)行緩存族购，且文件有一定更新機(jī)制（類似于瀏覽器緩存機(jī)制）
AppCache原理有兩個關(guān)鍵點：manifest 屬性和 manifest 文件壳贪。? ??
// HTML 在頭中通過 manifest 屬性引用 manifest 文件
// manifest 文件：就是上面以 appcache 結(jié)尾的文件，是一個普通文件文件寝杖，列出了需要緩存的文件
// 瀏覽器在首次加載 HTML 文件時违施，會解析 manifest 屬性，并讀取 manifest 文件瑟幕，獲取 Section：CACHE MANIFEST 下要緩存的文件列表磕蒲，再對文件緩存...// 原理說明如下：
// AppCache 在首次加載生成后，也有更新機(jī)制只盹。被緩存的文件如果要更新辣往，需要更新 manifest 文件
// 因為瀏覽器在下次加載時，除了會默認(rèn)使用緩存外鹿霸，還會在后臺檢查 manifest 文件有沒有修改（byte by byte)
發(fā)現(xiàn)有修改排吴，就會重新獲取 manifest 文件，對 Section：CACHE MANIFEST 下文件列表檢查更新
// manifest 文件與緩存文件的檢查更新也遵守瀏覽器緩存機(jī)制
// 如用戶手動清了 AppCache 緩存懦鼠，下次加載時钻哩，瀏覽器會重新生成緩存，也可算是一種緩存的更新
// AppCache 的緩存文件肛冶，與瀏覽器的緩存文件分開存儲的街氢，因為 AppCache 在本地有 5MB（分 HOST）的空間限制
