當前移動端Android主流應用開發都會涉及到H5頁面的加載，通常使用Android WebKit下的控件WebView。用起來很方便，但往往會碰到加載緩慢導致用戶體驗差的問題。我們嘗試集成x5內核，驗證一下是否真的對加載速度有所優化。
一、騰訊x5的優勢
- 速度快：相比系統webview的網頁打開速度有30+%的提升；
- 省流量：使用云端優化技術使流量節省20+%；
- 更安全：安全問題可以在24小時內修復；
- 更穩定：經過億級用戶的使用考驗，CRASH率低于0.15%；
- 兼容好：無系統內核的碎片化問題，更少的兼容性問題；
- 體驗優：支持夜間模式、適屏排版、字體設置等瀏覽增強功能；
- 功能全：在Html5、ES6上有更完整支持；
- 更強大：集成強大的視頻播放器，支持視頻格式遠多于系統webview；
- 視頻和文件格式的支持x5內核多于系統內核
- 防劫持
（以上是騰訊自己所提的一系列優勢，看起來還不錯）
二、項目中集成
- 第一步：SDK下載，點擊下載
當前提供兩種版本選擇，根據自己實際情況下載使用
下載解壓后文件夾內包含以下文件
以前使用需要申請appkey集成，現在已不需要。直接將上述紅框內的jar包放到自己的工程中，可以改下名字，默認的名字太長。
- 第二步：控件使用
- 如果是在老項目中切換使用WebView，在切換到x5可以直接全局更改包名即可，注意不止要在類里面改，xml中的文件也一定要改。
- 如果是集成只需注意導入的包名為com.tencent.**打頭即可。
可以看到，類名基本與原生一致
xml中使用x5 WebView
為了防止遺漏，官方也提供腳本checkqbsdk.sh點擊下載用于掃描確保替換的完整性，windows 上使用TBSSdk接入掃描工具.exe 點擊下載 進行掃描。腳本放在所有源碼頂級目錄即可。
- 第三步：配置相關
x5當前不提供64位so文件，但我們可以用下述方式解決該問題
- 打開對應module的build.gradle文件，添加defaultConfig()配置，該操作配置后編譯如果報錯，則在gradle.properties文件中加上Android.useDeprecatedNdk=true
- 找出build.gradle中配置的so加載目錄:jniLibs.srcDir:customerDir,如果沒有該項配置則so加載目錄默認為：src/main/jniLibs，需要將.so文件都放置在so加載目錄的armeabi文件夾下,.so文件可到Demo項目中該目錄下去下載,x5WebDemo地址在文章最底部。
項目中的配置
AndroidManifest.xml里加入權限聲明
-
第四步 預加載x5內核
建議App在 Application 的 onCreate 中立刻調用 QbSdk 的預加載接口。會提高首次加載網頁速度，不會導致白屏現象產生。
預加載接口 initX5Environment
運行x5WebDemo項目后主界面詳情
以上配置完后即可在項目中正常使用x5的WebView,有視頻、文件相關配置可以查看本項目x5WebDemo或官方配置文檔。
三、效果比對
本次測試加載兩個web頁面，一個京東內購，一個網易嚴選。為了擴大驗證結果，選了一個網速相對較慢的wifi網絡。
兩個web頁面樣式如下：
京東內購web
網易嚴選web
比對耗時:
原生內核-京東加載耗費時長
原生內核-網易嚴選加載消耗時長
x5內核-京東加載消耗時長
x5內核-網易嚴選加載消耗時長
可以看到，在切換到x5后，最大的改變就是首次加載頁面的速度有大幅度提升，加載時長相比原生快很多。其它時候的加載速度則是有一定的提升，但還無法滿足我們的優化需求。
4、其它
- 去除QQ瀏覽器推廣
getWindow().getDecorView().addOnLayoutChangeListener(new View.OnLayoutChangeListener() {
@Override
public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) {
ArrayList<View> outView = new ArrayList<View>();
getWindow().getDecorView().findViewsWithText(outView,"QQ瀏覽器",View.FIND_VIEWS_WITH_TEXT);
int size = outView.size();
if(outView!=null&&outView.size()>0){
outView.get(0).setVisibility(View.GONE);
}
}
});
5、結語
實際測試感受，移動端優化加載有限, 若想完美優化web加載速度，提升交互體驗。更多還需和前端同學一起配合測試共同優化。
