前言
由于H5具備 開發(fā)周期短、靈活性好 的特點，所以現(xiàn)在Android App大多嵌入了Android Webview組件進行Hybrid開發(fā)
但我知道你一定在煩惱Android Webview的性能問題，特別突出的是：加載速度慢 & 消耗流量
今天，我將針對Android Webview的性能問題，提出一些有效解決方案。
Android WebView里H5頁面加載速度慢
耗費流量
下面會詳細介紹。
下面會詳細介紹：
前端H5頁面渲染的速度取決于 兩個方面：
Js解析效率
Js本身的解析過程復雜、解析速度不快 & 前端頁面涉及較多JS代碼文件，所以疊加起來會導致Js解析效率非常低
手機硬件設備的性能
由于Android機型碎片化，這導致手機硬件設備的性能不可控，而大多數(shù)的Android手機硬件設備無法達到很好很好的硬件性能
總結：上述兩個原因 導致?H5頁面的渲染速度慢。
H5頁面從服務器獲得，并存儲在Android手機內存里：
H5頁面一般會比較多
每加載一個H5頁面，都會產生較多網(wǎng)絡請求：
HTML主URL自身的請求；
HTML外部引用的JS、CSS、字體文件，圖片也是一個獨立的HTTP請求
每一個請求都串行的，這么多請求串起來，這導致H5頁面資源加載緩慢
總結：H5頁面加載速度慢的原因：渲染速度慢 & 頁面資源加載緩慢 導致。
每次使用H5頁面時，用戶都需要重新加載Android WebView的H5頁面
每加載一個H5頁面，都會產生較多網(wǎng)絡請求（上面提到）
每一個請求都串行的，這么多請求串起來，這導致消耗的流量也會越多
綜上所述，產生Android WebView性能問題主要原因是：
上述問題導致了Android WebView的H5頁面體驗 與 原生Native存在較大差距。
針對上述Android WebView的性能問題，我提出了3種解決方案：
前端H5的緩存機制（WebView自帶）
資源預加載
資源攔截
下面我將詳細介紹。
定義
緩存，即離線存儲
這意味著H5網(wǎng)頁 加載后會存儲在緩存區(qū)域，在無網(wǎng)絡連接時也可訪問
WebView的本質 = 在Android中嵌入H5頁面，所以，Android WebView自帶的緩存機制其實就是H5頁面的緩存機制
Android WebView除了新的File System緩存機制還不支持，其他都支持。
作用
離線瀏覽：用戶可在沒有網(wǎng)絡連接時進行H5頁面訪問
提高頁面加載速度 & 減少流量消耗：直接使用已緩存的資源，不需要重新加載
具體應用
此處講解主要講解 前端H5的緩存機制 的緩存機制 & 緩存模式 ：
a. 緩存機制：如何將加載過的網(wǎng)頁數(shù)據(jù)保存到本地
b. 緩存模式：加載網(wǎng)頁時如何讀取之前保存到本地的網(wǎng)頁緩存
前者是保存，后者是讀取，請注意區(qū)別
Android WebView自帶的緩存機制有5種：
瀏覽器 緩存機制
Application Cache緩存機制
Dom Storage緩存機制
Web SQL Database緩存機制
Indexed Database緩存機制
File System緩存機制（H5頁面新加入的緩存機制，雖然Android WebView暫時不支持，但會進行簡單介紹）
下面將詳細介紹每種緩存機制。
根據(jù)HTTP協(xié)議頭里的Cache-Control（或Expires）和Last-Modified（或Etag）等字段來控制文件緩存的機制
下面詳細介紹Cache-Control、Expires、Last-Modified&Etag四個字段
Cache-Control：用于控制文件在本地緩存有效時長
如服務器回包：Cache-Control:max-age=600，則表示文件在本地應該緩存，且有效時長是600秒（從發(fā)出請求算起）。在接下來600秒內，如果有請求這個資源，瀏覽器不會發(fā)出 HTTP 請求，而是直接使用本地緩存的文件。
Expires：與Cache-Control功能相同，即控制緩存的有效時間
Expires是HTTP1.0標準中的字段，Cache-Control 是HTTP1.1標準中新加的字段
當這兩個字段同時出現(xiàn)時，Cache-Control優(yōu)先級較高
Last-Modified：標識文件在服務器上的最新更新時間
下次請求時，如果文件緩存過期，瀏覽器通過 If-Modified-Since 字段帶上這個時間，發(fā)送給服務器，由服務器比較時間戳來判斷文件是否有修改。如果沒有修改，服務器返回304告訴瀏覽器繼續(xù)使用緩存；如果有修改，則返回200，同時返回最新的文件。
Etag：功能同Last-Modified，即標識文件在服務器上的最新更新時間。
不同的是，Etag的取值是一個對文件進行標識的特征字串。
在向服務器查詢文件是否有更新時，瀏覽器通過If-None-Match字段把特征字串發(fā)送給服務器，由服務器和文件最新特征字串進行匹配，來判斷文件是否有更新：沒有更新回包304，有更新回包200
Etag和Last-Modified可根據(jù)需求使用一個或兩個同時使用。兩個同時使用時，只要滿足基中一個條件，就認為文件沒有更新。
常見用法是：
Cache-Control與Last-Modified一起使用；
Expires與Etag一起使用；
即一個用于控制緩存有效時間，一個用于在緩存失效后，向服務查詢是否有更新
特別注意：瀏覽器緩存機制 是 瀏覽器內核的機制，一般都是標準的實現(xiàn)
即Cache-Control、Last-Modified、Expires、Etag都是標準實現(xiàn)，你不需要操心
優(yōu)點：支持Http協(xié)議層
不足：緩存文件需要首次加載后才會產生；瀏覽器緩存的存儲空間有限，緩存有被清除的可能；緩存的文件沒有校驗。
對于解決以上問題，可以參考手 Q 的離線包
靜態(tài)資源文件的存儲，如` JS、CSS`、字體、圖片等。
Android Webview會將緩存的文件記錄及文件內容會存在當前 app 的 data 目錄中。
Android WebView內置自動實現(xiàn)，即不需要設置即實現(xiàn)
Android4.4后的WebView瀏覽器版本內核：Chrome
瀏覽器緩存機制 是 瀏覽器內核的機制，一般都是標準的實現(xiàn)
以文件為單位進行緩存，且文件有一定更新機制（類似于瀏覽器緩存機制）
AppCache原理有兩個關鍵點：manifest 屬性和 manifest 文件。
// HTML 在頭中通過 manifest 屬性引用 manifest 文件
// manifest 文件：就是上面以 appcache 結尾的文件，是一個普通文件文件，列出了需要緩存的文件
// 瀏覽器在首次加載 HTML 文件時，會解析 manifest 屬性，并讀取 manifest 文件，獲取 Section：CACHE MANIFEST 下要緩存的文件列表，再對文件緩存
...
// 原理說明如下：
// AppCache 在首次加載生成后，也有更新機制。被緩存的文件如果要更新，需要更新 manifest 文件
// 因為瀏覽器在下次加載時，除了會默認使用緩存外，還會在后臺檢查 manifest 文件有沒有修改（byte by byte)
發(fā)現(xiàn)有修改，就會重新獲取 manifest 文件，對 Section：CACHE MANIFEST 下文件列表檢查更新
// manifest 文件與緩存文件的檢查更新也遵守瀏覽器緩存機制
// 如用戶手動清了 AppCache 緩存，下次加載時，瀏覽器會重新生成緩存，也可算是一種緩存的更新
// AppCache 的緩存文件，與瀏覽器的緩存文件分開存儲的，因為 AppCache 在本地有 5MB（分 HOST）的空間限制
方便構建Web App的緩存
專門為Web App離線使用而開發(fā)的緩存機制
存儲靜態(tài)文件（如JS、CSS、字體文件）
應用場景 同 瀏覽器緩存機制
但AppCache 是對 瀏覽器緩存機制 的補充，不是替代。
? ? ? ? // 通過設置WebView的settings來實現(xiàn)
? ? ? ? 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()
通過存儲字符串的Key - Value對來提供
DOM Storage分為sessionStorage&localStorage； 二者使用方法基本相同，區(qū)別在于作用范圍不同：
a.sessionStorage：具備臨時性，即存儲與頁面相關的數(shù)據(jù)，它在頁面關閉后無法使用
b.localStorage：具備持久性，即保存的數(shù)據(jù)在頁面關閉后也可以使用。
存儲空間大（ 5MB）：存儲空間對于不同瀏覽器不同，如Cookies 才 4KB
存儲安全、便捷：Dom Storage存儲的數(shù)據(jù)在本地，不需要經(jīng)常和服務器進行交互
不像Cookies每次請求一次頁面，都會向服務器發(fā)送網(wǎng)絡請求
存儲臨時、簡單的數(shù)據(jù)
代替?將 不需要讓服務器知道的信息 存儲到cookies的這種傳統(tǒng)方法
Dom Storage機制類似于Android的SharedPreference機制
? ? ? ? // 通過設置 `WebView`的`Settings`類實現(xiàn)
? ? ? ? WebSettings settings = getSettings();
? ? ? ? settings.setDomStorageEnabled(true);
? ? ? ? // 開啟DOM storage
基于 `SQL` 的數(shù)據(jù)庫存儲機制
充分利用數(shù)據(jù)庫的優(yōu)勢，可方便對數(shù)據(jù)進行增加、刪除、修改、查詢
存儲適合數(shù)據(jù)庫的結構化數(shù)據(jù)
? ? ? ? // 通過設置WebView的settings實現(xiàn)
? ? ? ? WebSettings settings = getSettings();
? ? ? ? String cacheDirPath = context.getFilesDir().getAbsolutePath()+"cache/";
? ? ? ? settings.setDatabasePath(cacheDirPath);
? ? ? ? // 設置緩存路徑
? ? ? ? settings.setDatabaseEnabled(true);
? ? ? ? // 開啟 數(shù)據(jù)庫存儲機制
根據(jù)官方說明，Web SQL Database存儲機制不再推薦使用（不再維護）
取而代之的是IndexedDB緩存機制，下面會詳細介紹
屬于NoSQL數(shù)據(jù)庫，通過存儲字符串的Key - Value對來提供
類似于Dom Storage 存儲機制的key-value存儲方式
存儲 復雜、數(shù)據(jù)量大的結構化數(shù)據(jù)
// 通過設置WebView的settings實現(xiàn)
? ? ? ? WebSettings settings = getSettings();
? ? ? ? settings.setJavaScriptEnabled(true);
? ? ? ? // 只需設置支持JS就自動打開IndexedDB存儲機制
? ? ? ? // Android 在4.4開始加入對 IndexedDB 的支持，只需打開允許 JS 執(zhí)行的開關就好了。
為H5頁面的數(shù)據(jù) 提供一個虛擬的文件系統(tǒng)
可進行文件（夾）的創(chuàng)建、讀、寫、刪除、遍歷等操作，就像Native App訪問本地文件系統(tǒng)一樣
虛擬的文件系統(tǒng)是運行在沙盒中
不同WebApp的虛擬文件系統(tǒng)是互相隔離的，虛擬文件系統(tǒng)與本地文件系統(tǒng)也是互相隔離的。
虛擬文件系統(tǒng)提供了兩種類型的存儲空間：臨時 & 持久性：
臨時的存儲空間：由瀏覽器自動分配，但可能被瀏覽器回收
持久性的存儲空間：需要顯式申請；自己管理（瀏覽器不會回收，也不會清除內容）；存儲空間大小通過配額管理，首次申請時會一個初始的配額，配額用完需要再次申請。
可存儲數(shù)據(jù)體積較大的二進制數(shù)據(jù)
可預加載資源文件
可直接編輯文件
通過文件系統(tǒng) 管理數(shù)據(jù)
由于File System是H5新加入的緩存機制，所以Android WebView暫時不支持
綜合上述緩存機制的分析，我們可以根據(jù) 需求場景的不同（緩存不同類型的數(shù)據(jù)場景） 從而選擇不同的緩存機制（組合使用）
以下是緩存機制的使用建議：
定義
緩存模式是一種 當加載H5網(wǎng)頁時 該如何讀取之前保存到本地緩存
從而進行使用 的方式
即告訴Android WebView什么時候去讀緩存，以哪種方式去讀緩存
Android WebView自帶的緩存模式有4種：
// 緩存模式說明:
? ? ? // LOAD_CACHE_ONLY: 不使用網(wǎng)絡，只讀取本地緩存數(shù)據(jù)
? ? ? // LOAD_NO_CACHE: 不使用緩存，只從網(wǎng)絡獲取數(shù)據(jù).
? ? ? // LOAD_DEFAULT: （默認）根據(jù)cache-control決定是否從網(wǎng)絡上取數(shù)據(jù)。
? ? ? // LOAD_CACHE_ELSE_NETWORK，只要本地有，無論是否過期，或者no-cache，都使用緩存中的數(shù)據(jù)。
具體使用
WebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
// 設置參數(shù)即可
定義
提早加載將需使用的H5頁面，即?提前構建緩存
使用時直接取過來用而不用在需要時才去加載
具體實現(xiàn)
預加載WebView對象 & 預加載H5資源
此處主要分為2方面：首次使用的WebView對象 & 后續(xù)使用的WebView對象
具體如下圖
原理
在應用啟動、初始化第一個WebView對象時，直接開始網(wǎng)絡請求加載H5頁面
后續(xù)需打開這些H5頁面時就直接從該本地對象中獲取
a. 從而 事先加載常用的H5頁面資源（加載后就有緩存了）
b. 此方法雖然不能減小WebView初始化時間，但數(shù)據(jù)請求和WebView初始化可以并行進行，總體的頁面加載時間就縮短了；縮短總體的頁面加載時間：
具體實現(xiàn)
在Android的BaseApplication里初始化一個WebView對象（用于加載常用的H5頁面資源）；當需使用這些頁面時再從BaseApplication里取過來直接使用
對于Android WebView的首頁建議使用這種方案，能有效提高首頁加載的效率
為了有效解決Android WebView的性能問題，除了使用Android WebView自身的緩存機制，還可以自己針對某一需求場景構建緩存機制。
事先將更新頻率較低、常用 & 固定的H5靜態(tài)資源 文件（如JS、CSS文件、圖片等） 放到本地
攔截H5頁面的資源網(wǎng)絡請求 并進行檢測
如果檢測到本地具有相同的靜態(tài)資源 就 直接從本地讀取進行替換 而 不發(fā)送該資源的網(wǎng)絡請求 到 服務器獲取
重寫WebViewClient的shouldInterceptRequest方法，當向服務器訪問這些靜態(tài)資源時進行攔截，檢測到是相同的資源則用本地資源代替
// 假設現(xiàn)在需要攔截一個圖片的資源并用本地資源進行替代
? ? ? ? mWebview.setWebViewClient(new WebViewClient() {
? ? ? ? ? ? // 重寫 WebViewClient? 的? shouldInterceptRequest （）
? ? ? ? ? ? // API 21 以下用shouldInterceptRequest(WebView view, String url)
? ? ? ? ? ? // API 21 以上用shouldInterceptRequest(WebView view, WebResourceRequest request)
? ? ? ? ? ? // 下面會詳細說明
? ? ? ? ? ? // API 21 以下用shouldInterceptRequest(WebView view, String url)
? ? ? ? ? ? @Override
? ? ? ? ? ? public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
? ? ? ? ? ? ? ? // 步驟1:判斷攔截資源的條件，即判斷url里的圖片資源的文件名
? ? ? ? ? ? ? ? if (url.contains("logo.gif")) {
? ? ? ? ? ? ? ? // 假設網(wǎng)頁里該圖片資源的地址為：http://abc.com/imgage/logo.gif
? ? ? ? ? ? ? ? // 圖片的資源文件名為:logo.gif
? ? ? ? ? ? ? ? ? ? InputStream is = null;
? ? ? ? ? ? ? ? ? ? // 步驟2:創(chuàng)建一個輸入流
? ? ? ? ? ? ? ? ? ? try {
? ? ? ? ? ? ? ? ? ? ? ? is =getApplicationContext().getAssets().open("images/abc.png");
? ? ? ? ? ? ? ? ? ? ? ? // 步驟3:獲得需要替換的資源(存放在assets文件夾里)
? ? ? ? ? ? ? ? ? ? ? ? // a. 先在app/src/main下創(chuàng)建一個assets文件夾
? ? ? ? ? ? ? ? ? ? ? ? // b. 在assets文件夾里再創(chuàng)建一個images文件夾
? ? ? ? ? ? ? ? ? ? ? ? // c. 在images文件夾放上需要替換的資源（此處替換的是abc.png圖片）
? ? ? ? ? ? ? ? ? ? } catch (IOException e) {
? ? ? ? ? ? ? ? ? ? ? ? e.printStackTrace();
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? // 步驟4:替換資源
? ? ? ? ? ? ? ? ? ? WebResourceResponse response = new WebResourceResponse("image/png",
? ? ? ? ? ? ? ? ? ? ? ? ? ? "utf-8", is);
? ? ? ? ? ? ? ? ? ? // 參數(shù)1：http請求里該圖片的Content-Type,此處圖片為image/png
? ? ? ? ? ? ? ? ? ? // 參數(shù)2：編碼類型
? ? ? ? ? ? ? ? ? ? // 參數(shù)3：存放著替換資源的輸入流（上面創(chuàng)建的那個）
? ? ? ? ? ? ? ? ? ? return response;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? return super.shouldInterceptRequest(view, url);
? ? ? ? ? ? }
? ? ? ? ? // API 21 以上用shouldInterceptRequest(WebView view, WebResourceRequest request)
? ? ? ? ? ? @TargetApi(Build.VERSION_CODES.LOLLIPOP)
? ? ? ? ? ? @Override
? ? ? ? ? ? public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
? ? ? ? ? ? ? // 步驟1:判斷攔截資源的條件，即判斷url里的圖片資源的文件名
? ? ? ? ? ? ? ? if (request.getUrl().toString().contains("logo.gif")) {
? ? ? ? ? ? ? ? // 假設網(wǎng)頁里該圖片資源的地址為：http://abc.com/imgage/logo.gif
? ? ? ? ? ? ? ? // 圖片的資源文件名為:logo.gif
? ? ? ? ? ? ? ? ? ? InputStream is = null;
? ? ? ? ? ? ? ? ? ? // 步驟2:創(chuàng)建一個輸入流
? ? ? ? ? ? ? ? ? ? try {
? ? ? ? ? ? ? ? ? ? ? ? is = getApplicationContext().getAssets().open("images/abc.png");
? ? ? ? ? ? ? ? ? ? ? ? // 步驟3:獲得需要替換的資源(存放在assets文件夾里)
? ? ? ? ? ? ? ? ? ? ? ? // a. 先在app/src/main下創(chuàng)建一個assets文件夾
? ? ? ? ? ? ? ? ? ? ? ? // b. 在assets文件夾里再創(chuàng)建一個images文件夾
? ? ? ? ? ? ? ? ? ? ? ? // c. 在images文件夾放上需要替換的資源（此處替換的是abc.png圖片
? ? ? ? ? ? ? ? ? ? } catch (IOException e) {
? ? ? ? ? ? ? ? ? ? ? ? e.printStackTrace();
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? // 步驟4:替換資源
? ? ? ? ? ? ? ? ? ? WebResourceResponse response = new WebResourceResponse("image/png",
? ? ? ? ? ? ? ? ? ? ? ? ? ? "utf-8", is);
? ? ? ? ? ? ? ? ? ? // 參數(shù)1：http請求里該圖片的Content-Type,此處圖片為image/png
? ? ? ? ? ? ? ? ? ? // 參數(shù)2：編碼類型
? ? ? ? ? ? ? ? ? ? // 參數(shù)3：存放著替換資源的輸入流（上面創(chuàng)建的那個）
? ? ? ? ? ? ? ? ? ? return response;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? return super.shouldInterceptRequest(view, request);
? ? ? ? ? ? }
? ? });
}
下面我將通過 替換主頁面（http:// ip.cn/）中的一個圖片（http:// s.ip-cdn.com/img/logo.gif） 來對靜態(tài)資源攔截 進行說明。
為了更好的表現(xiàn)效果，我將替換的圖片換成別的圖片
步驟1：定義WebView布局
activity_main.xml
? ? xmlns:tools="http://schemas.android.com/tools"
? ? android:layout_width="match_parent"
? ? android:layout_height="match_parent"
? ? android:paddingBottom="@dimen/activity_vertical_margin"
? ? android:paddingLeft="@dimen/activity_horizontal_margin"
? ? android:paddingRight="@dimen/activity_horizontal_margin"
? ? android:paddingTop="@dimen/activity_vertical_margin"
? ? tools:context="scut.carson_ho.webview_interceptrequest.MainActivity">
? ? ? ? android:id="@+id/webview"
? ? ? ? android:layout_width="match_parent"
? ? ? ? android:layout_height="match_parent" />
步驟2：進行資源的攔截、檢測 & 替換（詳細請看注釋）
MainActivity.java
public class MainActivity extends AppCompatActivity {
? ? WebView mWebview;
? ? @Override
? ? protected void onCreate(Bundle savedInstanceState) {
? ? ? ? super.onCreate(savedInstanceState);
? ? ? ? setContentView(R.layout.activity_main);
? ? ? ? mWebview = (WebView) findViewById(R.id.webview);
? ? ? ? // 創(chuàng)建WebView對象
? ? ? ? mWebview.getSettings().setJavaScriptEnabled(true);
? ? ? ? // 支持與JS交互
? ? ? ? mWebview.loadUrl("http://ip.cn/");
? ? ? ? // 加載需要顯示的網(wǎng)頁
? ? ? ? mWebview.setWebViewClient(new WebViewClient() {
? ? ? ? ? ? // 復寫shouldInterceptRequest
? ? ? ? ? ? //API21以下用shouldInterceptRequest(WebView view, String url)
? ? ? ? ? ? @Override
? ? ? ? ? ? public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
? ? ? ? ? ? ? ? // 步驟1:判斷攔截資源的條件，即判斷url里的圖片資源的文件名
? ? ? ? ? ? ? ? // 此處網(wǎng)頁里圖片的url為:http://s.ip-cdn.com/img/logo.gif
? ? ? ? ? ? ? ? // 圖片的資源文件名為:logo.gif
? ? ? ? ? ? ? ? if (url.contains("logo.gif")) {
? ? ? ? ? ? ? ? ? ? InputStream is = null;
? ? ? ? ? ? ? ? ? ? // 步驟2:創(chuàng)建一個輸入流
? ? ? ? ? ? ? ? ? ? try {
? ? ? ? ? ? ? ? ? ? ? ? is =getApplicationContext().getAssets().open("images/error.png");
? ? ? ? ? ? ? ? ? ? ? ? // 步驟3:打開需要替換的資源(存放在assets文件夾里)
? ? ? ? ? ? ? ? ? ? ? ? // 在app/src/main下創(chuàng)建一個assets文件夾
? ? ? ? ? ? ? ? ? ? ? ? // assets文件夾里再創(chuàng)建一個images文件夾,放一個error.png的圖片
? ? ? ? ? ? ? ? ? ? } catch (IOException e) {
? ? ? ? ? ? ? ? ? ? ? ? e.printStackTrace();
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? // 步驟4:替換資源
? ? ? ? ? ? ? ? ? ? WebResourceResponse response = new WebResourceResponse("image/png",
? ? ? ? ? ? ? ? ? ? ? ? ? ? "utf-8", is);
? ? ? ? ? ? ? ? ? ? // 參數(shù)1:http請求里該圖片的Content-Type,此處圖片為image/png
? ? ? ? ? ? ? ? ? ? // 參數(shù)2:編碼類型
? ? ? ? ? ? ? ? ? ? // 參數(shù)3:替換資源的輸入流
? ? ? ? ? ? ? ? ? ? System.out.println("舊API");
? ? ? ? ? ? ? ? ? ? return response;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? return super.shouldInterceptRequest(view, url);
? ? ? ? ? ? }
? ? ? ? ? ? // API21以上用shouldInterceptRequest(WebView view, WebResourceRequest request)
? ? ? ? ? ? @TargetApi(Build.VERSION_CODES.LOLLIPOP)
? ? ? ? ? ? @Override
? ? ? ? ? ? public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
? ? ? ? ? ? ? ? // 步驟1:判斷攔截資源的條件，即判斷url里的圖片資源的文件名
? ? ? ? ? ? ? ? // 此處圖片的url為:http://s.ip-cdn.com/img/logo.gif
? ? ? ? ? ? ? ? // 圖片的資源文件名為:logo.gif
? ? ? ? ? ? ? ? if (request.getUrl().toString().contains("logo.gif")) {
? ? ? ? ? ? ? ? ? ? InputStream is = null;
? ? ? ? ? ? ? ? ? ? // 步驟2:創(chuàng)建一個輸入流
? ? ? ? ? ? ? ? ? ? try {
? ? ? ? ? ? ? ? ? ? ? ? is = getApplicationContext().getAssets().open("images/error.png");
? ? ? ? ? ? ? ? ? ? ? ? // 步驟3:打開需要替換的資源(存放在assets文件夾里)
? ? ? ? ? ? ? ? ? ? ? ? // 在app/src/main下創(chuàng)建一個assets文件夾
? ? ? ? ? ? ? ? ? ? ? ? // assets文件夾里再創(chuàng)建一個images文件夾,放一個error.png的圖片
? ? ? ? ? ? ? ? ? ? } catch (IOException e) {
? ? ? ? ? ? ? ? ? ? ? ? e.printStackTrace();
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? //步驟4:替換資源
? ? ? ? ? ? ? ? ? ? WebResourceResponse response = new WebResourceResponse("image/png",
? ? ? ? ? ? ? ? ? ? ? ? ? ? "utf-8", is);
? ? ? ? ? ? ? ? ? ? // 參數(shù)1：http請求里該圖片的Content-Type,此處圖片為image/png
? ? ? ? ? ? ? ? ? ? // 參數(shù)2：編碼類型
? ? ? ? ? ? ? ? ? ? // 參數(shù)3：存放著替換資源的輸入流（上面創(chuàng)建的那個）
? ? ? ? ? ? ? ? ? ? return response;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? return super.shouldInterceptRequest(view, request);
? ? ? ? ? ? }
? ? });
}
}
步驟3：加入網(wǎng)絡權限
Carson_Ho的Github地址：https://github.com/Carson-Ho/WebView_InterceptRequest
關于上述放到本地的靜態(tài)資源也是可以更新的：
1. 發(fā)布新版本安裝更新
2. 增量更新：在用戶處于WIFI環(huán)境時讓服務器推送到本地
很多著名的App（如微信）就是采用小范圍更新本地資源的
有效解決H5頁面靜態(tài)資源 加載速度慢 & 流量消耗多的問題
開發(fā)成本低
沒有改變前端H5的任何代碼，不需要為 APP 做定制化的東西
該方法只是更好地加快H5加載速度，哪怕失效，也不會對H5頁面產生其他負面影響
同樣能獲得相應的cookie
發(fā)送的網(wǎng)絡請求會直接帶上先前用戶操作所留下的cookie而都能夠留下來，因為我們沒有更改資源的 URL 地址
本文主要 對Android WebView的性能問題 & 解決方案 進行了全面介紹
