騰訊x5核心內建，優化web加載速度

目前移動端Android主流應用開發都會涉及到H5頁面的加載，通常使用Android WebKit下的控件WebView。用起來很友善，但往往會碰到加載緩慢導緻使用者體驗差的問題。我們嘗試內建x5核心，驗證一下是否真的對加載速度有所優化。

一、騰訊x5的優勢

1) 速度快：相比系統webview的網頁打開速度有30+%的提升；

2) 省流量：使用雲端優化技術使流量節省20+%；

3) 更安全：安全問題可以在24小時内修複；

4) 更穩定：經過億級使用者的使用考驗，CRASH率低于0.15%；

5) 相容好：無系統核心的碎片化問題，更少的相容性問題；

6) 體驗優：支援夜間模式、适屏排版、字型設定等浏覽增強功能；

7) 功能全：在Html5、ES6上有更完整支援；

8) 更強大：內建強大的視訊播放器，支援視訊格式遠多于系統webview；

9) 視訊和檔案格式的支援x5核心多于系統核心

10) 防劫持

（以上是騰訊自己所提的一系列優勢，看起來還不錯）

二、項目中內建

1) 第一步：SDK下載下傳，點選下載下傳

以前使用需要申請appkey內建，現在已不需要。直接将上述紅框内的jar包放到自己的工程中，可以改下名字，預設的名字太長。

2) 第二步：控件使用

• 如果是在老項目中切換使用WebView，在切換到x5可以直接全局更改包名即可，注意不止要在類裡面改，xml中的檔案也一定要改。
• 如果是內建隻需注意導入的包名為com.tencent.**打頭即可。

為了防止遺漏，官方也提供腳本checkqbsdk.sh點選下載下傳用于掃描確定替換的完整性，windows 上使用TBSSdk接入掃描工具.exe 點選下載下傳 進行掃描。腳本放在所有源碼頂級目錄即可。

3) 第三步：配置相關

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位址在文章最底部。

4) 第四步 預加載x5核心

建議App在 Application 的 onCreate 中立刻調用 QbSdk 的預加載接口。會提高首次加載網頁速度，不會導緻白屏現象産生。

以上配置完後即可在項目中正常使用x5的WebView,有視訊、檔案相關配置可以檢視本項目x5WebDemo或官方配置文檔。

三、效果比對

本次測試加載兩個web頁面，一個京東内購，一個網易嚴選。為了擴大驗證結果，選了一個網速相對較慢的wifi網絡。

兩個web頁面樣式如下：

比對耗時:

可以看到，在切換到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加載速度，提升互動體驗。更多還需和前端同學一起配合測試共同優化。

項目Demo位址:https://github.com/RickyYu/x5WebDemo。