X5 浏览器内核调研报告

关于这份调研报告，不是从技术角度深刻探索，重点是从产品自己分析，通俗易懂才是重点。主要是为了锻炼平时作技术调研和竞品分析的能力，以及业务拓展的技术储备。内容有点多，下面 **X5 **内核调研报告将分为三个环节：Why - What - How 描述。

按照经典的 2W1H 的策略描述

WHY

1、Android 端为何须要考虑浏览器内核问题 ？

**一言以蔽之：你是要搞定一个 X5 上的兼容性问题，仍是要搞定几百台安卓手机上的兼容性问题。**下面就从多个维度来分析兼容性问题：

系统内置浏览器内核差别化

对于 Android 系统，一般如下面四个节点做为重要划分依据，分析浏览器内核的差别性先系统差别性提及，下面是目前 Google 最新统计数据：

系统版本	设备占比
Android 4.0如下	0.9%
Android 4.0 - Android 4.4	11.0%
Android 4.4	20.0%
Android5.0及以上	68.1%

从上面数据来看，当前绝大多数 Android 手机使用的都是 Android 4.4 或以上的系统， 这也是System WebView 内核大变动的分界线。 在 Android 4.4版本中，本来基于 Android WebKit 的 WebView 实现被换成基于Chromium的实现，新的 Chromium 实现专一于提供一致性的接口（为了兼容之前的应用），而内部的渲染引擎改成使用基于 Blink/Content 内核的引擎，这实现无论是从功能上仍是性能来说，都带来巨大的提高。

Chromium是一个由Google主导的开源浏览器工程，Chrome浏览器会选择在它的某一个稳定版本进行开发和发布。除了Chrome浏览器，Chrome OS也是基于Chromium开发的。

从 Android 5.0 开始，Google 把 Chromium blink内核 webview 做为 apk 单独从系统抽离出去，能够在应用市场上面接收安装更新。应用能够直接使用该webview内核，Google也能够及时发布更新，不用再经过更新系统才能更新浏览器内核，也避免部分了 Android 系统碎片化问题。

Android 平台碎片化

关于 Android 碎片化问题集中表如今下面几个方面：

• 设备繁多，硬件配置参差不弃，设备性能各异，差距很大
• 品牌众多，厂商标准不一致，定制化系统体验不一样
• 版本各异，国内外系统环境差别巨大
• 分辨率不统一，各类类型尺寸众多

下图是 OpenSignal 在 2015 年 8 月发布的基础统计数据，针对市场上常见的 1294 种手机品牌进行了市场占有率统计，能够看出机型分布很是零碎。

下图是关于 Android 设备分辨率的分布图，能够看出 Android 设备各类类型尺寸众多，开发者须要进行适配的难度很是大。

特别是在 Android 系统开源但 Google 提供的基础服务在国内没法使用的状况下，国内厂商每每抛弃了 Google 既有的规范，对系统进行了大量的定制，致使设备ROM 与原生 Android 系统环境差别性巨大。

对于浏览器内核也是如此，即使是Google推出了基于 Chromium blink 内核实现的 WebView，可是不少国内厂商对其进行了精简或替代，致使 WebView 内核也是碎片化问题严重，这让开发者直接使用系统浏览器内核进行开发产生了众多顾虑，不一样机型适配难度也大大增长。

2、目前移动端 H5 适配已有的问题是什么？

** 一言以蔽之：设备碎片化和UI风格的自定义（动画特效等）性能差。** 因为Android自己碎片化问题严重，不一样设备上的体验差别性太大，开发者很难全面适配。虽然Google在不断引入行业中领先的技术改善体验，可是短期内很难覆盖，何况开源特性也致使很难统一各厂商对系统定制化的取舍。

在一些旧机型上面，就算h5页面中图片与文本信息并很少,但在WebView中展现的时候都会出现拖拽不流畅，切换留白、窗口闪烁等的现象，这是 WebView 自身渲染能力不强的问题所致。

又好比Html5的Video控件播放视频，iOS点击视频部分，会用系统自带的浏览器全屏播放视频，体验效果佳；而Android的WebView没法全屏，体验效果差一些。 对于页面加载慢，偶尔内存泄露，不一样 Android 系统版本采用了不一样内核的兼容问题等等，这些都是使用原生 webview 组件进行开发时常会遇到的问题。

所以目前面临的首要问题就是：如何解决当前描述的移动端生态乱象。

3、为何要用 X5 内核来改善效果？（替腾讯浏览服务 X5 内核官网介绍背书）

腾讯浏览服务由QQ浏览器团队出品，致力于优化移动端webview体验的整套解决方案，使用QQ浏览器X5内核SDK和X5云端服务，解决移动端webview使用过程当中出现的一切问题，优化用户的浏览体验。

X5 SDK是经过调用微信/手机QQ/空间的X5内核，解决系统webview兼容性差、加载速度慢、功能缺陷等问题，开发接入便捷，大小只有253K，仅需几行代码，便可解决一切令开发者们头疼的问题，为用户提供最优秀的浏览体验。

其相对于系统webview，具备下述明显优点：

1. 速度快：相比系统webView的网页加载速度有近30%的提高。
2. 省流量：云端优化技术使流量节省20%
3. 更安全：24小时安全问题解决机制
4. 更稳定：通过亿级用户的使用考验，CRASH率0.15%
5. 集成强大的视频播放器，支持各类视频格式直接打开
6. 适屏排版、字体设置等浏览加强功能的提供
7. Html5更完整支持。
8. 无系统内核的碎片化问题，更少的兼容性问题 X5云端服务是经过云端技术保证用户在未装QQ浏览器的状况下一样可使用X5内核提供的优秀服务，包括云加速、云安全、云转换三大功能。

4、小结

关于 Why 这个部分，主要经过分析当前市场环境和开发者所面临的问题，引出使用 x5 内核必要性讨论。 对于前端开发同窗而言，考虑如何更加有效的适配尽量多的设备，兼容更多的用户环境，打造趋于一致的用户体验，在保证高度可用性的状况下，提供更多丰富的交互体验。 腾讯对 x5 内核的介绍看上去彷佛是至关可靠的，但它是什么，接下来还得一步一步讨论关于浏览器内核。

WHAT

1、关于浏览器内核是什么？

关于浏览器内核的讨论能够分红两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。 渲染引擎负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，而后会输出至显示器或打印机。浏览器的内核的不一样对于网页的语法解释会有不一样，因此渲染的效果也不相同。 JS 引擎则是解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。最开始渲染引擎和 JS 引擎并无区分的很明确，后来 JS 引擎愈来愈独立，内核就倾向于只指渲染引擎。 浏览器内核主要的做用是将页面转变成可视化的图像结果，整个过程能够简化描述成以下步骤：

2013 年之前，常见的浏览器内核表明有 Trident（IE），Gecko（firefox），Webkit（Safari chrome 等）以及 Presto（opera)。2013 年，谷歌开始研发 blink 引擎，chrome 28 之后开始使用，而 opera 则放弃了自主研发的 Presto 引擎，投入谷歌怀抱，和谷歌一块儿研发 blink 引擎，国内各类 chrome系的浏览器（360、UC、QQ、百度等等）也纷纷放弃 webkit，投入 blink 的怀抱。

目前国内主流浏览器内核，如UC的U3内核、QQ浏览器的X5内核以及百度的T5内核在以前的版本都是基于开源内核 Webkit 开发，因此是在 Webkit 的基础上进行二次优化，在功能与性能上大同小异。然后随着 chrome 的发展，也逐渐转为了 blink 内核。

浏览器内核渲染引擎的基础结构

从内核总体结构上看，渲染引擎能够归纳为主要包括HTML解释器、CSS解释器、布局和JavaScript引擎、绘图等：

• HTML解释器：解释HTML文本的解释器，主要做用是将HTML文本解释成DOM(文档对象模型)树，DOM是一种文档的表示方法.
• CSS解释器：级联样式表的解释器，主要做用是为DOM中各个元素对象计算出样式信息，从而为计算最后网页的布局提供基础设施。
• 布局：在DOM建立以后，WebKit须要将其中的元素对象一样式信息结合起来，计算他们的大小位置等布局信息，造成一个可以表示这全部信息的内部表示模型。
• JavaScript引擎：使用JavaScript代码能够修改网页的内容，也能修改CSS的信息，JS引擎可以解释JS代码并经过DOM接口和CSSOM接口来修改网页内容和样式信息，从而改变渲染的结果。
• 绘图：使用图形库将布局计算后的各个网页的节点绘制成图形结果。

关于Android 浏览器内核

前面介绍有提到，在 Android 4.4版本中，本来基于 Android WebKit 的 WebView 实现被换成的Chromium实现，新的 Chromium 内部的渲染引擎改成使用基于 Blink/Content 内核的引擎。

关于 WebKit 和 Chromium 的区别，关键在于Google 放弃了以前由 Apple 主导的开源 WebKit，能够说 WebKit 是之前维系 Google 和 Apple 一个技术交流的重要纽带。Chromium 是从一个 WebKit 分支基础上逐渐走上了自研的道路，其采用了自研的 Blink 渲染引擎和 V8 JavaScript 引擎做为新内核重要支撑。

下面基于高低Android系统版本的两台测试机型的实际表现，对 WebView 内核在不一样系统版本中的性能差别性进行简单量化：

从对比测试来看，在 Android 4.4 以上系统中基于 Chromium 内核的开发的WebView对比旧版本的 WebKit 性能和兼容性方面有了显著的提高，与之相对的是 Chromium 多进程的特性致使内存占用变大，并且库文件也达到了 28M 左右。 下图是 Chromium 的架构和主要模块示意图，从图上可知 Blink 只是其中的一个模块，和它并列的还有众多的 Chromium 模块，包括 GPU/CommandBuffe r(硬件加速架构)、V8 JavaScript 引擎、沙箱模型、CC(Chromium合成器)、IPC、UI等

2、关于x5 内核有什么优劣，是否有其余成熟解决方案？

腾讯浏览器服务 TBS —— X5内核

腾讯浏览服务 TBS 在 2.3 版本中，其 X5 内核就是基于 Android 5.0 WebView Blink内核（M37版本）适配定制优化。

X5 内核号称适配 Android 所有主流平台，能够在全部 Android 手机上使用Blink的技术能力，具备更好的 H5/CSS3 支持和性能。设备有安装微信、手机QQ、QQ空间便可使用最新的 TBS2.3Blink 内核。其官网提供了x5内核相关参数信息：

实际对比测试表现：下面是在同一设备下，QQ 浏览器和 Google Chrome 浏览器在 H5 支持度对比数据。 设备 ：华为 Nexus 6p Android 7.1 测试平台：https://html5test.com 左：QQ Browser 7.2 X5 内核 右：Chrome Dev 55 Chromium 内核

从实际测试对比来看，对比Chromium 内核实际数据，X5 内核的表现并不及预期。固然测试依据主要是从兼容性和 H5 支持度这些技术指标，主要是从技术的维度来考察的。 考虑到实际开发场景中主要是兼容性问题比较突出，跑分不是最终目的，因此统一场景才是最重要的。下面看看 x5 的特色，能够作些什么。

典型行业解决方案介绍——白鹭引擎

目前针对HTML5游戏的解决方案已经很是多，针对成熟的技术类产品对比，一般有多个维度进行对比，不只仅是技术层面，还有许多非技术层面的内容，这里不展开比较。

之因此选择白鹭引擎来介绍，不只仅是由于白鹭引擎拥有众多成熟的产品能够一站式解决而受开发者热捧，关键在于它还跟腾讯 X5 浏览器有深度合做，其好处不言而喻，恐怕会是微信游戏开发不二之选。 白鹭Egret引擎是一个开源免费的游戏框架，用于构建二维游戏、演示程序和其余图形界面交互应用等。Egret使用TypeScript脚本语言开发。当游戏完成最终的打包后，能够将程序转换为HTML5游戏。实现跨平台特性。

Egret Runtime 是白鹭一款支持3D的HTML5游戏加速器，解决低端机对HTML5标准支持不佳、体验差的弊端，适配不一样的系统让HTML5游戏效果媲美原生游戏。跟腾讯浏览器 x5的合做，直接支持了H5游戏运行所需的底层功能， 从根本上解决了碎片化和性能问题。

腾讯浏览器 X5 已经解决了 HTML5 游戏在各个应用场景的运行问题，而跟合做白鹭 Egret Runtime 又能够大幅优化终端体验。根据官网介绍，在有 Egret Rumtime 加速的状况下，HTML5游戏会有3-5倍的性能提高，对比 PhoneGAP 方案约有30倍的性能提高，从而使 HTML5 游戏接近原生游戏的体验。

HOW

1、如何借助 x5 内核来进行实践？

经过腾讯浏览服务官网提供的 X5 内核接入指南，将提供的内核服务的sdk集成到应用中。因为 x5 内核是在 Android 原生 WebView 基础上的二次开发，因此其提供的 在开发者调用接口上和原生保持一致，兼容原生 webview 的各类属性设置，若是以前使用原始 webview 的几乎时能够无缝替换。

虽然对于主流移动应用开发模式的讨论已是老生常谈，以前热议的 Hybrid 混合开发模式也被如今 ReactNative 、Weex 抢了风头。关键仍是愈来愈多的场景须要高度动态化的内容，保持对用户友好且统一的体验同时，考虑更多的轻便快捷交互、快速迭代更新的特性。

脱离实际的应用场景来讨论哪种开发模式孰优孰劣没有意义，关键仍是要贴合场景选择最适合的，因此这里对三种开发模式的相关细节不展开讨论，只针对开发有 Web 类场景需求的状况进行考虑：

相比Native App，Web 体验中受限于以上5个因素：网络环境，渲染性能，平台特性，受限于浏览器内核，系统限制。

所以解决这些问题的关键在于提供一个良好的基础运行环境和一个成熟的完整解决方案。借助 x5 内核能够改善运行环境，到达交互趋于一致性。

关于“一致性”常常被理解为同一个应用在各类平台和场景下要有一致性的体验。可是在移动平台开发过程当中，“一致性”应该是App视觉和交互习惯与其运行平台的习惯保持一致，用户总体体验保持一致。而 Web 开发“一次开发，跨平台运行”的特性与此存在必定程度上的冲突是合理的。

如上所述，借助 x5 内核的来进行实践的目的也就是如此。下面就按照这个设计思路就来进行具体的 x5 嵌入实施过程，从技术角度切入后，经过编写Demo试验比对实际效果，来判断带来怎样效益的提高。

2、要怎样进行具体的实施过程，解决那些已有的问题？

具体实施过程大体分为嵌入集成和实际功能应用两个部分。

集成 X5 内核

腾讯浏览服务 TBS 官网提供了 X5 内核SDK分为完整版和精简版。精简版不可独立下载x5内核，只能共享使用微信或手Q的x5内核，JAR包约190Kb。而完整版可独立下载x5内核，也可共享使用微信或手Q的x5内核，JAR包约280Kb。

因为X5内核的API接口和系统的保持高度一致，所以实际的使用方式与使用原生进行开发同样。关于实际的编码过程不展开描述，具体参照官方的接入文档进行。

x5集成过程当中发现了下面有几个特色：

• 若是有安装QQ 或 微信 （国内发布的版本），而且已经打开过内置- web，下拉网页顶部空白处会出现了由x5内核提供技术，表示应用是可使用共享的x5内核。
• 若是没有安装qq微信，应用不能够能够共享使用微信 或 QQ 中的 x5 内核，可是不能共享使用其余集成了x5应用的内核，只能使用完整版内核sdk包。
• 有些设备首次启动没法启用 x5 内核，须要进程重启或首次启动长耗时等待之后才能正常使用 x5 内核。
• 当没法使用 x5 内核，腾讯浏览服务 TBS SDK 会默认使用系统内置的webview，二者接口保持高度一致。
• x5对视频播放的支持很好，可全屏效果控制方便，腾讯也提供了配套的sdk后台服务。

实际功能应用（X5EngineDemo 示例程序）

用QQ浏览器 X5 内核SDK和 X5 云端服务，解决移动端 webview 使用过程当中出现困扰开发者须要适配兼容性的问题，提高性能的同时优化用户的浏览体验，有利于统一用户设备基础环境。

带来的效益，主要是减小适配难度，提高产品兼容性和表现效果。成熟的产品和普遍的用户人群，提高保障同时减小出现没必要要的麻烦，下降开发成本。

在开放中有使用Html5的Video控件来播放视频的状况，为了举例说明使用 x5 能够带来的效益。下面就从展现网页这个角度切入，对比看看 X5 内核能带来的什么样的效果：

从上图测试能够看出，对于首次加载网页，使用systemWebView进行网页加载耗时要优于x5，针对有开启缓存的状况喜好，屡次打开相同网页状况，x5的耗时是略比系统的少。

H5 游戏测试

以下图所示，在测试全屏H5游戏效果时，对比发现二者在高硬件配置的设备上体验差别不大，x5的帧率比较稳定。在某些低配置和低版本系统上运行时，x5的表现要优于系统浏览器内核，并且适配性更强。

播放网页视频

以下图所示，测试腾讯视频网站，发现使用系统 WebView 存在视频加载错误的问题，而使用了 X5 内核的则是能够正常播放。

可是，接入 x5 内核的成本也是须要考虑，开发者对于 X5 的评价也褒贬不一。 下面测试哔哩哔哩弹幕网站的效果，在使用系统 webview 的状况下，是采用了哔哩哔哩带有弹幕的播放器，能够正常播放的同时也支持弹幕的显示。而采用了X5内核进行播放时，则自动替换成 x5 自带的播放器，能够看到loading显示的也是x5提供的界面，因此致使弹幕没法正常展现。

下面再看看全屏模式下的播放，x5 对比原生区别很明显。而在测试 H5 游戏时，x5是可以正常音画同步，而系统webview则没有正常背景音乐，帧率偶尔也会低了10左右，这些也都是不少开发者选择 x5 的重要因素。

Native与JS交互效果测试（JsBridge）

首先咱们来了解一下为何要使用JSBridge，在开发中，为了追求开发的效率以及移植的便利性，一些展现性强的页面咱们会偏向于使用 H5 来完成，功能性强的页面咱们会偏向于使用 Native 来完成。 而一旦使用了 H5，为了在 H5 中尽量的获得native的体验，咱们 Native 层须要暴露一些方法给js调用，好比，弹Toast提醒，弹Dialog，分享等等，有时候甚至把h5的网络请求放着native去完成，而JSBridge作得好的一个典型就是微信，微信给开发者提供了JSSDK，该SDK中暴露了不少微信native层的方法，好比支付，定位等。

测试经过JsBridge进行webview中的js代码调用本地java接口的效果，试验进行辅助sdk开发的可行性。X5 内核也提供了js接口安全调研机制来保证webview自己的安全漏洞问题，并且也会及时响应 Google 对于浏览器内核漏洞的修复。

3、如何评判引入 x5 内核后带来的提高？

** 总的来讲，关于 X5 引入带来的提高，能够从下面的维度去讨论。在以前的对比分析中依旧有描述相关特性，并且关于实际表现很难定性指标依据，这里再也不重复介绍。具体能够参照 Demo 中的实际使用效果，对比 X5 内核带来的提高效果。**

• 页面加载速度（部分页面预加载缓存控制）
• 界面使用流畅度（游戏帧率，效果稳定性）
• 显示兼容性（页面兼容性，多机型适配，界面效果一致性，视频播放等）
• 交互和特性支持（js支持丰富友好程度，新的HTML特性）
• 稳定性和安全性（安全漏洞补丁修复）
• 可持续性（迭代更新支持）

总结

经过预研X5内核，梳理了浏览器内核相关的概念，按照典型的 2W1H 模型对比分析X5内核其技术特性和实际应用场景，在技术试验方面从多个维度来讨论可应用性。

其实从前面的描述能够知道，腾讯推出 X5 内核主要是为了解决Android终端设备的差别性所形成的前端页面适配和浏览体验问题，意在打造一个可让开发者减小适配工做成本，提高用户体验的一致性，为移动应用提供基础浏览器服务。

根据调研过程当中对浏览器内核技术的学习，以及对市场成熟应用场景的分析，基于 X5 内核sdk，咱们能够作些什么？

若是考虑开发 H5 游戏引擎，这个行业中已经太多的成熟解决方案，并且用户广泛对H5游戏的接受程度还有待提升。像微信拥有很好的流量入口，原本是拓展H5游戏的好平台，可是自身加以了严格限制，禁止朋友圈公众号转发H5游戏之类的。

假设基于x5作二次封装，打造本身的sdk。可是 X5 跟系统 webview 接口保持高度一致，二次封装只能是增长开发者使用难度。并且浏览器内核至关难以维护，由于快速迭代致使直接整合的成本过高。

若是作集成辅助类sdk，相似微信的JS-SDK，这是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包，目的是减小网页开发者使用 js 与 微信App Native交互的成本。这里设想一个场景来考虑： 好比有这样一个场景，一个网页开发者打算开发一款游戏或者应用，可是考虑到开发成本和效益，直接经过实现H5界面后包成壳后，做为 App 来上架发布。这样实现快速开发的同时，又能够进行动态化内容能够快速更新，减小传统 App 迭代更新的各类弊端。

如今有不少相似白鹭引擎之类的厂商提供了一整套的解决方案，可是连接 H5 和 Native相关的设想确并非不少。好比 H5 开发者使用native平台自己的特性来进行交互设计的成本仍是太大。虽然有相似 JsBridge 手段，可是同时兼顾js和native开发，须要网页开发者更大的成本，而怎么提供更丰富流畅的H5交互体验支持就是能够尝试去解决的问题。

总之，能够利用 x5 的适配性强的特色展开更多丰富交互设计和提高用户的设想，把浏览器内核这项基础性的底层服务应用得更好。

部分参考资料：

各主流浏览器内核介绍

Layabox 解读微信全面升级 X5 Blink 内核

主流浏览器内核介绍（前端开发值得了解的浏览器内核历史）

Android WebView加载Chromium动态库的过程分析

HTML5游戏引擎深度测评

腾讯X5联手白鹭EgretRuntime 共推HTML5游戏

腾讯浏览服务

基于腾讯X5内核的混合APP开发模式

Hybrid APP架构设计思路

理解JSBridge

Android JSBridge的原理与实现

X5 示例Demo项目

X5EngineDemo