基於騰訊x5封源庫，提高60%開發效率

楊充發表於2019-09-23

目錄介紹

01.前沿說明
- 1.1 案例展示效果
- 1.2 該庫功能和優勢
- 1.3 相關類介紹說明
02.如何使用
- 2.1 如何引入
- 2.2 最簡單使用
- 2.3 常用api
- 2.4 使用建議
03.js呼叫
- 3.1 如何使用專案js呼叫
- 3.2 js的呼叫時機分析
04.問題反饋
- 4.0.1 視訊播放寬度超過螢幕
- 4.0.2 x5載入office資源
- 4.0.3 WebView播放視訊問題
- 4.0.4 無法獲取webView的正確高度
- 4.0.5 使用scheme協議開啟連結風險
- 4.0.6 如何處理載入錯誤
05.webView優化
- 5.0.1 視訊全屏播放按返回頁面被放大
- 5.0.2 加快載入webView中的圖片資源
- 5.0.3 自定義載入異常error的狀態頁面
- 5.0.4 WebView硬體加速導致頁面渲染閃爍
- 5.0.5 WebView載入證照錯誤
- 5.0.6 web音訊播放銷燬後還有聲音
- 5.0.7 DNS採用和客戶端API相同的域名
- 5.0.8 如何設定白名單操作
06.關於參考
07.其他說明介紹

01.前沿說明

基於騰訊x5封源庫，提高webView開發效率，大概要節約你百分之六十的時間成本。該案例支援處理js的互動邏輯且無耦合、同時暴露進度條載入進度、可以監聽異常error狀態、支援視訊播放並且可以全頻、支援載入word，xls，ppt，pdf，txt等檔案文件、發簡訊、打電話、發郵件、開啟檔案操作上傳圖片、喚起原生App、x5庫為最新版本，功能強大。

1.1 案例展示效果

WebView啟動過程大概分為以下幾個階段，這裡借鑑美團的一張圖片
案例效果圖展示

1.2 該庫功能和優勢

提高webView開發效率，大概要節約你百分之六十的時間成本，一鍵初始化操作；
支援處理js的互動邏輯，方便快捷，並且無耦合；
暴露進度條載入進度，結束，以及異常狀態listener給開發者；
支援視訊播放，可以切換成全頻播放視訊，可旋轉螢幕；
整合了騰訊x5的WebView，最新版本，功能強大；
支援開啟檔案的操作，比如開啟相簿，然後選中圖片上傳，相容版本(5.0)
支援載入word，xls，ppt，pdf，txt等檔案文件，使用方法十分簡單

1.3 相關類介紹說明

BridgeHandler 介面，主要處理訊息回撥邏輯
BridgeUtil 工具類，靜態常量，以及獲取js訊息的一些方法，final修飾
BridgeWebView 自定義WebView類，主要處理與js之間的訊息
CallBackFunction js回撥
DefaultHandler 預設的BridgeHandler
InterWebListener 介面，web的介面回撥，包括常見狀態頁面切換【狀態頁面切換】，進度條變化【顯示和進度監聽】等
Message 自定義訊息Message實體類
ProgressWebView 自定義帶進度條的webView
WebViewJavascriptBridge js橋接介面
X5WebChromeClient 自定義x5的WebChromeClient，處理進度監聽，title變化，以及上傳圖片，後期新增視訊處理邏輯
X5WebUtils 工具類，初始化騰訊x5瀏覽器webView，及呼叫該類init方法
X5WebView 可以使用這個類，方便統一初始化WebSettings的一些屬性，如果不用這裡的，想單獨初始化setting屬性，也可以直接使用BridgeWebView
X5WebViewClient 自定義x5的WebViewClient，如果要自定義WebViewClient必須要整合此類，一定要繼承該類，因為注入js監聽是在該類中操作的

02.如何使用

2.1 如何引入

如何引用，該x5的庫已經更新到最新版本

implementation 'cn.yc:WebViewLib:1.1.2'
複製程式碼

2.2 最簡單使用

專案初始化
```
X5WebUtils.init(this);
複製程式碼
```

最普通使用，需要自己做手動設定setting相關屬性

<BridgeWebView
    android:id="@+id/web_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbarSize="3dp" />
複製程式碼

也可以使用X5WebView，已經做了常見的setting屬性設定

<X5WebView
    android:id="@+id/web_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbarSize="3dp" />
複製程式碼

如果想有帶進度的，可以使用ProgressWebView

<可以使用ProgressWebView
    android:id="@+id/web_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbarSize="3dp" />
複製程式碼

2.3 常用api

關於web的介面回撥，包括常見狀態頁面切換，進度條變化等監聽處理

mWebView.getX5WebChromeClient().setWebListener(interWebListener);
private InterWebListener interWebListener = new InterWebListener() {
    @Override
    public void hindProgressBar() {
        pb.setVisibility(View.GONE);
    }

    @Override
    public void showErrorView() {
        //設定自定義異常錯誤頁面
    }

    @Override
    public void startProgress(int newProgress) {
        pb.setProgress(newProgress);
    }
};
複製程式碼

關於視訊播放的時候，web的介面回撥，主要是視訊相關回撥，比如全頻，取消全頻，隱藏和現實webView

x5WebChromeClient = x5WebView.getX5WebChromeClient();
x5WebChromeClient.setVideoWebListener(new VideoWebListener() {
    @Override
    public void showVideoFullView() {
        //視訊全頻播放時監聽
    }

    @Override
    public void hindVideoFullView() {
        //隱藏全頻播放，也就是正常播放視訊
    }

    @Override
    public void showWebView() {
        //顯示webView
    }

    @Override
    public void hindWebView() {
        //隱藏webView
    }
});
複製程式碼

2.4 使用建議

優化一下相關的操作

關於設定js支援的屬性

@Override
public void onResume() {
    super.onResume();
    if (mWebView != null) {
        mWebView.getSettings().setJavaScriptEnabled(true);
    }
}

@Override
protected void onStop() {
    super.onStop();
    if (mWebView != null) {
        mWebView.getSettings().setJavaScriptEnabled(false);
    }
}
複製程式碼

關於destroy銷燬邏輯

@Override
protected void onDestroy() {
    try {
        if (webView != null) {
            webView.stopLoading();
            webView.destroy();
            webView = null;
        }
    } catch (Exception e) {
        Log.e("X5WebViewActivity", e.getMessage());
    }
    super.onDestroy();
}
複製程式碼

03.js呼叫

3.1 如何使用專案js呼叫

程式碼如下所示，下面中的jsname代表的是js這邊提供給客戶端的方法名稱

mWebView.registerHandler("jsname", new BridgeHandler() {
    @Override
    public void handler(String data, CallBackFunction function) {
        
    }
});
複製程式碼

如何回撥資料給web那邊

function.onCallBack("回撥資料");
複製程式碼

3.2 js的呼叫時機分析

onPageFinished()或者onPageStarted()方法中注入js程式碼
- 做過WebView開發，並且需要和js互動，大部分都會認為js在WebViewClient.onPageFinished()方法中注入最合適，此時dom樹已經構建完成，頁面已經完全展現出來。但如果做過頁面載入速度的測試，會發現WebViewClient.onPageFinished()方法通常需要等待很久才會回撥（首次載入通常超過3s），這是因為WebView需要載入完一個網頁裡主文件和所有的資源才會回撥這個方法。
- 能不能在WebViewClient.onPageStarted()中注入呢？答案是不確定。經過測試，有些機型可以，有些機型不行。在WebViewClient.onPageStarted()中注入還有一個致命的問題——這個方法可能會回撥多次，會造成js程式碼的多次注入。
- 從7.0開始，WebView載入js方式發生了一些小改變，官方建議把js注入的時機放在頁面開始載入之後。
WebViewClient.onProgressChanged()方法中注入js程式碼
- WebViewClient.onProgressChanged()這個方法在dom樹渲染的過程中會回撥多次，每次都會告訴我們當前載入的進度。
  - 在這個方法中，可以給WebView自定義進度條，類似微信載入網頁時的那種進度條
  - 如果在此方法中注入js程式碼，則需要避免重複注入，需要增強邏輯。可以定義一個boolean值變數控制注入時機
- 那麼有人會問，載入到多少才需要處理js注入邏輯呢？
  - 正是因為這個原因，頁面的進度載入到80%的時候，實際上dom樹已經渲染得差不多了，表明WebView已經解析了標籤，這時候注入一定是成功的。在WebViewClient.onProgressChanged()實現js注入有幾個需要注意的地方：
  - 1 上文提到的多次注入控制，使用了boolean值變數控制
  - 2 重新載入一個URL之前，需要重置boolean值變數，讓重新載入後的頁面再次注入js
  - 3 如果做過本地js，css等快取，則先判斷本地是否存在，若存在則載入本地，否則載入網路js
  - 4 注入的進度閾值可以自由定製，理論上10%-100%都是合理的，不過建議使用了75%到90%之間可以。

04.問題反饋

4.0.1 視訊播放寬度超過螢幕

視訊播放寬度比webView設定的寬度大，超過螢幕：這個時候可以設定ws.setLoadWithOverviewMode(false);

4.0.2 x5載入office資源

關於載入word，pdf，xls等文件檔案注意事項：Tbs不支援載入網路的檔案，需要先把檔案下載到本地，然後再載入出來
還有一點要注意，在onDestroy方法中呼叫此方法mTbsReaderView.onStop()，否則第二次開啟無法瀏覽。更多可以看FileReaderView類程式碼！

4.0.3 WebView播放視訊問題

1、此次的方案用到WebView，而且其中會有視訊巢狀，在預設的WebView中直接播放視訊會有問題，而且不同的SDK版本情況還不一樣，網上搜尋了下解決方案，在此記錄下. webView.getSettings.setPluginState(PluginState.ON);webView.setWebChromeClient(new WebChromeClient());
2、然後在webView的Activity配置裡面加上： android:hardwareAccelerated="true"
3、以上可以正常播放視訊了，但是webview的頁面都finish了居然還能聽到視訊播放的聲音，於是又查了下發現webview的onResume方法可以繼續播放，onPause可以暫停播放，但是這兩個方法都是在Added in API level 11新增的，所以需要用反射來完成。
4、停止播放：在頁面的onPause方法中使用：webView.getClass().getMethod("onPause").invoke(webView, (Object[])null);
5、繼續播放：在頁面的onResume方法中使用：webView.getClass().getMethod("onResume").invoke(webView,(Object[])null);這樣就可以控制視訊的暫停和繼續播放了。

4.0.4 無法獲取webView的正確高度

偶發情況，獲取不到webView的內容高度

其中htmlString是一個HTML格式的字串。

WebView view = new WebView(context);
view.loadData(htmlString, "text/html", "utf-8");

view.setWebViewClient(new WebViewClient() {
    public void onPageFinished(WebView view, String url) {
     super.onPageFinished(view, url);
     Log.d("2", view.getContentheight() + "");
    }
});
複製程式碼

這是因為onPageFinished回撥指的WebView已經完成從網路讀取的位元組數，這一點。在點onPageFinished被激發的頁面可能還沒有被解析。

第一種解決辦法：提供onPageFinished（）一些延遲

webView.setWebViewClient(new WebViewClient() {
 @Override
 public void onPageFinished(WebView view, String url) {
  super.onPageFinished(view, url);
  new Handler().postDelayed(new Runnable() {
   @Override
   public void run() {
    int contentHeight = webView.getContentHeight();
    int viewHeight = webView.getHeight();
   }
  }, 500);
 }
});
複製程式碼

第二種解決辦法：使用js獲取內容高度，具體可以看這篇文章：www.jianshu.com/p/ad22b2649…

4.0.5 使用scheme協議開啟連結風險

常見的用法是在APP獲取到來自網頁的資料後，重新生成一個intent，然後傳送給別的元件使用這些資料。比如使用Webview相關的Activity來載入一個來自網頁的url，如果此url來自url scheme中的引數，如：yc://ycbjie:8888/from?load_url=http://www.taobao.com。
- 如果在APP中，沒有檢查獲取到的load_url的值，攻擊者可以構造釣魚網站，誘導使用者點選載入，就可以盜取使用者資訊。
- 這個時候，別人非法篡改引數，於是將scheme協議改成yc://ycbjie:8888/from?load_url=http://www.doubi.com。這個時候點選進去即可進入釣魚連結地址。
使用建議
- APP中任何接收外部輸入資料的地方都是潛在的攻擊點，過濾檢查來自網頁的引數。
- 不要通過網頁傳輸敏感資訊，有的網站為了引導已經登入的使用者到APP上使用，會使用指令碼動態的生成URL Scheme的引數，其中包括了使用者名稱、密碼或者登入態token等敏感資訊，讓使用者開啟APP直接就登入了。惡意應用也可以註冊相同的URL Sechme來擷取這些敏感資訊。Android系統會讓使用者選擇使用哪個應用開啟連結，但是如果使用者不注意，就會使用惡意應用開啟，導致敏感資訊洩露或者其他風險。

4.0.6 如何處理載入錯誤(Http、SSL、Resource)

對於WebView載入一個網頁過程中所產生的錯誤回撥，大致有三種

/**
 * 只有在主頁面載入出現錯誤時，才會回撥這個方法。這正是展示載入錯誤頁面最合適的方法。
 * 然而，如果不管三七二十一直接展示錯誤頁面的話，那很有可能會誤判，給使用者造成經常載入頁面失敗的錯覺。
 * 由於不同的WebView實現可能不一樣，所以我們首先需要排除幾種誤判的例子：
 *      1.載入失敗的url跟WebView裡的url不是同一個url，排除；
 *      2.errorCode=-1，表明是ERROR_UNKNOWN的錯誤，為了保證不誤判，排除
 *      3failingUrl=null&errorCode=-12，由於錯誤的url是空而不是ERROR_BAD_URL，排除
 * @param webView                                           webView
 * @param errorCode                                         errorCode
 * @param description                                       description
 * @param failingUrl                                        failingUrl
 */
@Override
public void onReceivedError(WebView webView, int errorCode,
                            String description, String failingUrl) {
    super.onReceivedError(webView, errorCode, description, failingUrl);
    // -12 == EventHandle.ERROR_BAD_URL, a hide return code inside android.net.http package
    if ((failingUrl != null && !failingUrl.equals(webView.getUrl())
            && !failingUrl.equals(webView.getOriginalUrl())) /* not subresource error*/
            || (failingUrl == null && errorCode != -12) /*not bad url*/
            || errorCode == -1) { //當 errorCode = -1 且錯誤資訊為 net::ERR_CACHE_MISS
        return;
    }
    if (!TextUtils.isEmpty(failingUrl)) {
        if (failingUrl.equals(webView.getUrl())) {
            //做自己的錯誤操作，比如自定義錯誤頁面
        }
    }
}

/**
 * 只有在主頁面載入出現錯誤時，才會回撥這個方法。這正是展示載入錯誤頁面最合適的方法。
 * 然而，如果不管三七二十一直接展示錯誤頁面的話，那很有可能會誤判，給使用者造成經常載入頁面失敗的錯覺。
 * 由於不同的WebView實現可能不一樣，所以我們首先需要排除幾種誤判的例子：
 *      1.載入失敗的url跟WebView裡的url不是同一個url，排除；
 *      2.errorCode=-1，表明是ERROR_UNKNOWN的錯誤，為了保證不誤判，排除
 *      3failingUrl=null&errorCode=-12，由於錯誤的url是空而不是ERROR_BAD_URL，排除
 * @param webView                                           webView
 * @param webResourceRequest                                webResourceRequest
 * @param webResourceError                                  webResourceError
 */
@Override
public void onReceivedError(WebView webView, WebResourceRequest webResourceRequest,
                            WebResourceError webResourceError) {
    super.onReceivedError(webView, webResourceRequest, webResourceError);
}

/**
 * 任何HTTP請求產生的錯誤都會回撥這個方法，包括主頁面的html文件請求，iframe、圖片等資源請求。
 * 在這個回撥中，由於混雜了很多請求，不適合用來展示載入錯誤的頁面，而適合做監控報警。
 * 當某個URL，或者某個資源收到大量報警時，說明頁面或資源可能存在問題，這時候可以讓相關運營及時響應修改。
 * @param webView                                           webView
 * @param webResourceRequest                                webResourceRequest
 * @param webResourceResponse                               webResourceResponse
 */
@Override
public void onReceivedHttpError(WebView webView, WebResourceRequest webResourceRequest,
                                WebResourceResponse webResourceResponse) {
    super.onReceivedHttpError(webView, webResourceRequest, webResourceResponse);
}

/**
 * 任何HTTPS請求，遇到SSL錯誤時都會回撥這個方法。
 * 比較正確的做法是讓使用者選擇是否信任這個網站，這時候可以彈出信任選擇框供使用者選擇（大部分正規瀏覽器是這麼做的）。
 * 有時候，針對自己的網站，可以讓一些特定的網站，不管其證照是否存在問題，都讓使用者信任它。
 * 坑：有時候部分手機開啟頁面報錯，絕招：讓自己網站的所有二級域都是可信任的。
 * @param webView                                           webView
 * @param sslErrorHandler                                   sslErrorHandler
 * @param sslError                                          sslError
 */
@Override
public void onReceivedSslError(WebView webView, SslErrorHandler sslErrorHandler, SslError sslError) {
    super.onReceivedSslError(webView, sslErrorHandler, sslError);
    //判斷網站是否是可信任的，與自己網站host作比較
    if (WebViewUtils.isYCHost(webView.getUrl())) {
        //如果是自己的網站，則繼續使用SSL證照
        sslErrorHandler.proceed();
    } else {
        super.onReceivedSslError(webView, sslErrorHandler, sslError);
    }
}
複製程式碼

05.webView優化

5.0.1 視訊全屏播放按返回頁面被放大（部分手機出現)

至於原因暫時沒有找到，解決方案如下所示

/**
 * 當縮放改變的時候會呼叫該方法
 * @param view                              view
 * @param oldScale                          之前的縮放比例
 * @param newScale                          現在縮放比例
 */
@Override
public void onScaleChanged(WebView view, float oldScale, float newScale) {
    super.onScaleChanged(view, oldScale, newScale);
    //視訊全屏播放按返回頁面被放大的問題
    if (newScale - oldScale > 7) {
        //異常放大，縮回去。
        view.setInitialScale((int) (oldScale / newScale * 100));
    }
}
複製程式碼

5.0.2 載入webView中的資源時，加快載入的速度優化，主要是針對圖片

html程式碼下載到WebView後，webkit開始解析網頁各個節點，發現有外部樣式檔案或者外部指令碼檔案時，會非同步發起網路請求下載檔案，但如果在這之前也有解析到image節點，那勢必也會發起網路請求下載相應的圖片。在網路情況較差的情況下，過多的網路請求就會造成頻寬緊張，影響到css或js檔案載入完成的時間，造成頁面空白loading過久。解決的方法就是告訴WebView先不要自動載入圖片，等頁面finish後再發起圖片載入。

//初始化的時候設定，具體程式碼在X5WebView類中
if(Build.VERSION.SDK_INT >= KITKAT) {
    //設定網頁在載入的時候暫時不載入圖片
    ws.setLoadsImagesAutomatically(true);
} else {
    ws.setLoadsImagesAutomatically(false);
}

/**
 * 當頁面載入完成會呼叫該方法
 * @param view                              view
 * @param url                               url連結
 */
@Override
public void onPageFinished(WebView view, String url) {
    super.onPageFinished(view, url);
    //頁面finish後再發起圖片載入
    if(!webView.getSettings().getLoadsImagesAutomatically()) {
        webView.getSettings().setLoadsImagesAutomatically(true);
    }
}
複製程式碼

5.0.3 自定義載入異常error的狀態頁面，比如下面這些方法中可能會出現error

當WebView載入頁面出錯時（一般為404 NOT FOUND），安卓WebView會預設顯示一個出錯介面。當WebView載入出錯時，會在WebViewClient例項中的onReceivedError()，還有onReceivedTitle方法接收到錯誤

/**
 * 請求網路出現error
 * @param view                              view
 * @param errorCode                         錯誤?
 * @param description                       description
 * @param failingUrl                        失敗連結
 */
@Override
public void onReceivedError(WebView view, int errorCode, String description, String
        failingUrl) {
    super.onReceivedError(view, errorCode, description, failingUrl);
    if (errorCode == 404) {
        //用javascript隱藏系統定義的404頁面資訊
        String data = "Page NO FOUND！";
        view.loadUrl("javascript:document.body.innerHTML=\"" + data + "\"");
    } else {
        if (webListener!=null){
            webListener.showErrorView();
        }
    }
}

// 向主機應用程式報告Web資源載入錯誤。這些錯誤通常表明無法連線到伺服器。
// 值得注意的是，不同的是過時的版本的回撥，新的版本將被稱為任何資源（iframe，影像等）
// 不僅為主頁。因此，建議在回撥過程中執行最低要求的工作。
// 6.0 之後
@Override
public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
    super.onReceivedError(view, request, error);
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
        X5WebUtils.log("伺服器異常"+error.getDescription().toString());
    }
    //ToastUtils.showToast("伺服器異常6.0之後");
    //當載入錯誤時，就讓它載入本地錯誤網頁檔案
    //mWebView.loadUrl("file:///android_asset/errorpage/error.html");
    if (webListener!=null){
        webListener.showErrorView();
    }
}

/**
 * 這個方法主要是監聽標題變化操作的
 * @param view                              view
 * @param title                             標題
 */
@Override
public void onReceivedTitle(WebView view, String title) {
    super.onReceivedTitle(view, title);
    if (title.contains("404") || title.contains("網頁無法開啟")){
        if (webListener!=null){
            webListener.showErrorView();
        }
    } else {
        // 設定title
    }
}
複製程式碼

5.0.4 WebView硬體加速導致頁面渲染閃爍

4.0以上的系統我們開啟硬體加速後，WebView渲染頁面更加快速，拖動也更加順滑。但有個副作用就是，當WebView檢視被整體遮住一塊，然後突然恢復時（比如使用SlideMenu將WebView從側邊滑出來時），這個過渡期會出現白塊同時介面閃爍。解決這個問題的方法是在過渡期前將WebView的硬體加速臨時關閉，過渡期後再開啟
```
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
    webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
複製程式碼
```

5.0.5 WebView載入證照錯誤

webView載入一些別人的url時候，有時候會發生證照認證錯誤的情況，這時候我們希望能夠正常的呈現頁面給使用者，我們需要忽略證照錯誤，需要呼叫WebViewClient類的onReceivedSslError方法，呼叫handler.proceed()來忽略該證照錯誤。

/**
 * 在載入資源時通知主機應用程式發生SSL錯誤
 * 作用：處理https請求
 * @param view                              view
 * @param handler                           handler
 * @param error                             error
 */
@Override
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
    super.onReceivedSslError(view, handler, error);
    if (error!=null){
        String url = error.getUrl();
        X5WebUtils.log("onReceivedSslError----異常url----"+url);
    }
    //https忽略證照問題
    if (handler!=null){
        //表示等待證照響應
        handler.proceed();
        // handler.cancel();      //表示掛起連線，為預設方式
        // handler.handleMessage(null);    //可做其他處理
    }
}
複製程式碼

5.0.6 web音訊播放銷燬後還有聲音

WebView頁面中播放了音訊,退出Activity後音訊仍然在播放，需要在Activity的onDestory()中呼叫

@Override
protected void onDestroy() {
    try {
        //有音訊播放的web頁面的銷燬邏輯
        //在關閉了Activity時，如果Webview的音樂或視訊，還在播放。就必須銷燬Webview
        //但是注意：webview呼叫destory時,webview仍繫結在Activity上
        //這是由於自定義webview構建時傳入了該Activity的context物件
        //因此需要先從父容器中移除webview,然後再銷燬webview:
        if (webView != null) {
            ViewGroup parent = (ViewGroup) webView.getParent();
            if (parent != null) {
                parent.removeView(webView);
            }
            webView.removeAllViews();
            webView.destroy();
            webView = null;
        }
    } catch (Exception e) {
        Log.e("X5WebViewActivity", e.getMessage());
    }
    super.onDestroy();
}
複製程式碼

5.0.7 DNS採用和客戶端API相同的域名

建立連線/伺服器處理；在頁面請求的資料返回之前，主要有以下過程耗費時間。
```
DNS
connection
伺服器處理
複製程式碼
```
DNS採用和客戶端API相同的域名
- DNS會在系統級別進行快取，對於WebView的地址，如果使用的域名與native的API相同，則可以直接使用快取的DNS而不用再發起請求圖片。
- 舉個簡單例子，客戶端請求域名主要位於api.yc.com，然而內嵌的WebView主要位於 i.yc.com。
- 當我們初次開啟App時：客戶端首次開啟都會請求api.yc.com，其DNS將會被系統快取。然而當開啟WebView的時候，由於請求了不同的域名，需要重新獲取i.yc.com的IP。靜態資源同理，最好與客戶端的資源域名保持一致。

5.0.8 如何設定白名單操作

客戶端內的WebView都是可以通過客戶端的某個schema開啟的，而要開啟頁面的URL很多都並不寫在客戶端內，而是可以由URL中的引數傳遞過去的。上面4.0.5 使用scheme協議開啟連結風險已經說明了scheme使用的危險性，那麼如何避免這個問題了，設定執行訪問的白名單。或者當使用者開啟外部連結前給使用者強烈而明顯的提示。具體操作如下所示：
- 在onPageStarted開始載入資源的方法中，獲取載入url的host值，然後和本地儲存的合法host做比較，這裡domainList是一個陣列
```
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
    super.onPageStarted(view, url, favicon);
    String host = Uri.parse(url).getHost();
    LoggerUtils.i("host:" + host);
    if (!BuildConfig.IS_DEBUG) {
        if (Arrays.binarySearch(domainList, host) < 0) {
            //不在白名單內，非法網址，這個時候給使用者強烈而明顯的提示
        } else {
            //合法網址
        }
    }
}
複製程式碼
```

06.關於參考

感謝開源庫
- x5開發文件
- JsBridge開源庫
參考部落格
- WebView效能、體驗分析與優化

開源庫地址：github.com/yangchong21…

常用的幾個提高iOS開發效率的開源類庫及工具
2020-04-07
iOS
基於 Multitype 開源庫封裝更好用的RecyclerView.Adapter
2018-11-29
封裝ViewAPT
提高開發效率之VS Code基礎配置篇
2019-02-16
用 FutureBuilder 提高開發效率
2019-07-02
Rebuild
提高開發效率小技巧
2021-01-28
騰訊再開源三項技術，提升企業開發及運營效率
2019-04-15
開源專案推薦：提高研發效率的5個開源專案
2023-05-11
華為雲 DAS，大幅提高資料庫開發效率
2019-02-21
資料庫
如何提高App開發的效率？
2021-11-24
APP
諾基亞X5跑分多少? 聯發科P60的諾基亞X5安兔兔跑分
2018-07-19
求助基於 APP 騰訊 X5 的 webview 控制元件無法識別的問題
2020-04-13
APPWebView控制元件
基於 uber 開源的 zap 二次封裝
2020-04-20
封裝
騰訊UnLua開源
2019-08-13
提高iOS App開發效率的方法
2024-01-12
iOSAPP
CoffeeScript和Sass提高Web開發效率
2021-09-09
Web
基於流程管理，提高工作質量和效率
2021-12-28
基於Docker封裝的開發包工具
2018-11-18
Docker封裝
騰訊X5核心 WebView 實踐總結
2019-01-24
WebView
MySQL之父造訪騰訊雲為騰訊雲資料庫開源點贊
2019-03-26
MySql資料庫
duxapp：基於Taro使用模組化開發，提升開發效率
2024-09-23
UXAPP
API開發平臺，提高API開發及管理效率
2021-11-09
API
JAVA開發之簡化Dao層、提高開發效率
2019-02-27
Java
vscode和matlab聯動-提高開發效率
2022-04-11
VSCodeMatlab
騰訊“瘋狂”開源！
2020-01-22
基於騰訊 x5 的引擎開發的混合 app，appim 切換 webview 時報錯。哪位大佬幫忙看看，有償解決。謝謝～
2020-07-29
APPWebView
如何能提高CSS編寫技巧提高Web前端開發效率
2019-09-25
CSSWeb前端
Python使用.NET開發的類庫來提高你的程式執行效率
2024-06-16
Python
JAVA開發之簡化Dao層、提高開發效率（二）
2019-03-01
Java
提高了資料庫產品開發的“效率”，它將原始碼開放
2022-01-15
資料庫原始碼
【譯】提高React開發效率的5個工具
2018-10-23
React
騰訊Node.js基礎設施TSW正式開源
2018-05-21
Node.js
不要重複造輪子？提高生產效率！5個超好用的開源工具庫分享
2023-05-17
開源工具
基於.Net開發的資料庫匯入匯出的開源專案
2023-05-05
資料庫
在 Laravel 中使用 TypeScript 、CoffeeScript 、pug 提高開發效率
2019-12-13
LaravelTypeScript
一些提高開發效率的小體會
2019-04-22
提高企業開發效率的優質工具：快速開發平臺
2020-03-01
騰訊牛逼！終於開源了自家的 Tencent JDK——Kona！！.md
2020-12-07
JDK
用好ngResource和postman，提高你的開發除錯效率
2019-01-24
Postman除錯