天天看點

騰訊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下載下傳,點選下載下傳

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

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

2) 第二步:控件使用

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

為了防止遺漏,官方也提供腳本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位址在文章最底部。

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

4) 第四步 預加載x5核心

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

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

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

三、效果比對

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

兩個web頁面樣式如下:

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

比對耗時:

騰訊x5核心內建,優化web加載速度
騰訊x5核心內建,優化web加載速度
騰訊x5核心內建,優化web加載速度
騰訊x5核心內建,優化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。