1.1.1 渲染速度慢

前端H5頁面渲染的速度取決於 兩個方面：

• Js 解析效率
  Js 本身的解析過程複雜、解析速度不快 & 前端頁面涉及較多 JS 程式碼檔案，所以疊加起來會導致 Js 解析效率非常低
• 手機硬體裝置的效能
  由於Android機型碎片化，這導致手機硬體裝置的效能不可控，而大多數的Android手機硬體裝置無法達到很好很好的硬體效能

總結：上述兩個原因 導致 H5頁面的渲染速度慢。

1.1.2 頁面資源載入緩慢

H5 頁面從伺服器獲得，並儲存在 Android手機記憶體裡：

• H5頁面一般會比較多
• 每載入一個 H5頁面，都會產生較多網路請求：
  1. HTML 主 URL 自身的請求；
  2. HTML外部引用的JS、CSS、字型檔案，圖片也是一個獨立的 HTTP 請求

每一個請求都序列的，這麼多請求串起來，這導致 H5頁面資源載入緩慢

總結：H5頁面載入速度慢的原因：渲染速度慢 & 頁面資源載入緩慢 導致 。

Android WebView自帶的快取機制有5種：

1.瀏覽器 快取機制：Android WebView內建自動實現，即不需要設定即實現 2.Application Cache 快取機制

        // 通過設定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()複製程式碼

3.Dom Storage 快取機制

a. 原理

        // 通過設定 `WebView`的`Settings`類實現
        WebSettings settings = getSettings();

        settings.setDomStorageEnabled(true);
        // 開啟DOM storage複製程式碼

4.Web SQL Database 快取機制

        // 通過設定WebView的settings實現
        WebSettings settings = getSettings();

        String cacheDirPath = context.getFilesDir().getAbsolutePath()+"cache/";
        settings.setDatabasePath(cacheDirPath);
        // 設定快取路徑

        settings.setDatabaseEnabled(true);
        // 開啟 資料庫儲存機制複製程式碼

5.Indexed Database 快取機制   (類似於 Dom Storage 儲存機制 的key-value儲存方式)

a. 應用場景

儲存 複雜、資料量大的結構化資料

// 通過設定WebView的settings實現
        WebSettings settings = getSettings();

        settings.setJavaScriptEnabled(true);
        // 只需設定支援JS就自動開啟IndexedDB儲存機制
        // Android 在4.4開始加入對 IndexedDB 的支援，只需開啟允許 JS 執行的開關就好了。複製程式碼

6.File System 快取機制（H5頁面新加入的快取機制，雖然Android WebView暫時不支援）

小技巧

• 在使用了上述說的Android WebView的快取機制後，短時間內再次訪問同一個H5頁面時，載入速度會比第一次的時間短、更加流暢
• 基於 Android WebView自身的這些快取機制，有一種小技巧能更好地去減少H5頁面的載入速度 & 提高效能：在應用啟動時就初始化一個 WebView ，事先載入常用H5頁面資源（載入後就有快取了），後續需要開啟這些H5頁面時就直接從本地獲取。

  這種技巧其實是採用了 資源預載入 的思想：提早載入將來需要使用的H5頁面（有快取了），使用時直接取過來用，而不用在需要時才去載入

• 具體實現：在Android 的BaseApplication就初始化一個WebView物件用於載入常用的H5頁面資源；當需要使用這些頁面時再從BaseApplication裡取過來直接使用

  1. 對於Android WebView的首頁建議使用這種方案，能有效提高首頁載入的效率
  2. 當然這裡的BaseApplication只是舉個例子，你也可以選擇在其他地方提前加

2.1.2 快取模式

• 定義
  快取模式是一種 當載入 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);
// 設定引數即可複製程式碼