优化Webview加载速度 TBS(腾讯浏览服务X5内核) | VasSonic(提升H5首屏加载速度)

1. 浏览增强
   传统系统内核(Webview)存在适配成本高、不安全、不稳定、耗流量、速度慢、视频播放差、文件能力差等问题，这是移动应用开发商在进行Hybrid App开发时普遍面临的难题。腾讯浏览服务基于腾讯X5内核解决方案（包括内核和云服务），能够有效解决传统移动web技术面临的普遍问题，同时能极大扩展应用(Hybrid App)内浏览场景的服务能力。
   
2. 安全
   腾讯浏览服务为应用浏览场景提供完善的安全保障体系，包括：云安全方案：保障数据安全，防恶意劫持（DNS劫持, HTTP劫持等），防恶意网址，防恶意文件下载等；端安全方案：及时解决系统内核无法解决的各类风险和漏洞，支持热修复，24小时安全问题解决机制。
3. 极速，省流
   腾讯浏览服务在云端对网页及资源流进行压缩，在终端优化网页加载全流程。基于腾讯浏览服务，流量消耗普遍可减少20%~40%，网页加载速度平均可提升35%。

TBS腾讯浏览服务

TBS(腾讯浏览服务)的优势

1) 速度快：相比系统webview的网页打开速度有30+%的提升；

2) 省流量：使用云端优化技术使流量节省20+%；

3) 更安全：安全问题可以在24小时内修复；

4) 更稳定：经过亿级用户的使用考验，CRASH率低于0.15%；

5) 兼容好：无系统内核的碎片化问题，更少的兼容性问题；

6) 体验优：支持夜间模式、适屏排版、字体设置等浏览增强功能；

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

8) 更强大：集成强大的视频播放器，支持视频格式远多于系统webview；

9) 视频和文件格式的支持x5内核多于系统内核

10) 防劫持是x5内核的一大亮点

---

关于如何接入sdk，这里就不详述了， 详见TBS接入指南

将源码和XML里的系统包和类替换为SDK里的包和类，具体对应如下：



这里主要讲替换成TBS后的一些语法不支持的解决办法：

1.如果webview 用到了JavascriptInterface :
例  webview.addJavascriptInterface(new JavaScriptWebview(this), "xxxxxx");
请还是继续使用系统包下的JavascriptInterface
import android.webkit.JavascriptInterface;

2.解决https与http混加载问题
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { 
      webview.getSettings().setMixedContentMode(android.webkit.WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}
请还是继续使用系统包下的WebSettings.MIXED_CONTENT_ALWAYS_ALLOW

再介绍一下 Tencent开源的VasSonic

见github链接Tencent/VasSonic
以上2者组合使用，效果更佳哦。

---

注：再提一小点`webview.getSettings().setBlockNetworkImage(xx);` 
建议先用webView.getSettings().setBlockNetworkImage(true); 
网页在加载的时候将图片下载阻塞，然后在浏览器的onProgressChanged事件中设置webView.getSettings().setBlockNetworkImage(false);
通过图片的延迟载入，让网页能更快地显示。
new WebChromeClient() {
    @Override
     public void onProgressChanged(WebView view, int progress) {
     if (progress == 100) {
        webview.getSettings().setBlockNetworkImage(false);
     }
   }
}

最后也建议Web前端工程师改进一下，使用懒加载js脚本，这样整体效率会提升很多
javascript_lazy_loading_with_lazyload