o2team/H5Skills

认识X5内核

Opened this issue · 1 comments

Android WebView

Android 4.4及其以上,Google 采用了**Chromium**(Chrome浏览器引擎)作为系统WebView的底层内核支持。

目前(截至16年5月份),Android的最新版本为6.0版本(Marshmallow,棉花糖)。

截至16年2月份,根据Google公布的Android 各个系统版本市场占有率(Google Android dashboards),Android 4.0及其以上系统将近90%左右。意味着我们可以忽略Android2.x带来的兼容性问题。

参考资料:Android 各个版本WebView

X5

  • 腾讯基于优秀开源Webkit 深度优化的浏览器渲染引擎

  • 为抹平不同 Android 版本不同 Webview 的坑而生。但本身也带来了许多坑。

  • 虽然官方不承认,但实际上它是基于Chromuim开源项目的。
    ==== webkit内核以及blink内核在x5的使用情况 ====

  • QQ浏览器:6.2版本及以后使用blink内核。

  • X5 tbs 1.x:版本号为02xxxx,使用webkit内核。

  • X5 tbs 2.x:版本号为03xxxx。使用blink内核。

拓展:Webkit & Chromuim &Chrome & Blink

  • WebKit是一个开源的项目,其前身是来源于KDE的KHTML和KJS。该项目专注于网页内容的展示,开发出一流的网页渲染引擎。

  • Chromium是一个建立在WebKit之上的浏览器开源项目,由Google发起的。

  • ** Chrome**是Google公司的浏览器产品,它基于chromium开源项目。可以理解为,内核是开源的,UI是闭源的。

  • Blink是Google退出WebKit项目,从而自己创建的渲染引擎。但并不是全新的引擎,Blink目前就是从WebKit直接复制出一个版本出来,然后将与chromium无关的Ports全部移除掉,将代码结构重新整理,就目前而言,Blink的渲染和WebKit是一样,但是,以后两者将各自走不同的路。

参考资料: 理解WebKit和Chromium

X5升级了

截至16年4月份,x5升级全量发布。
TBS2.0基于Android 5.0 WebView Blink内核(M37版本)适配定制优化,适配Android全部主流平台,可以在所有Android手机上使用Blink的技术能力。具有更好的H5/CSS3支持和性能。TBS2.0已经发布,将逐步在各客户端中静默升级,无需更新微信、手机QQ、QQ空间即可使用最新的TBS2.0 Blink内核。

更简洁地说,即是:

  • 基于Blink内核(chrome 37版本)
  • 适用于Android全部主流平台
  • 静默升级

PS:iOS版本的微信Web View一直是WKWebView内核,WKWebView的版本依赖于iOS的系统版本。

==== TBS2.0内核详情 ====

  • BLINK版本: 基于Chrome 37
  • HTML版本: HTML5.0
  • XHTML版本: xHTML Basic 1.0 | xHTML1.1
  • SVG版本: SVG1.2
  • WML版本: Wml 1.0
  • CSS版本: CSS3
  • Spdy版本: 3.1
  • 支持的JavaScript版本: Ecma5

Changelog 以及 解读

1.内核从Webkit升级至Blink,拥有更好的支持

那么哪里可以查阅兼容性呢?

X5 CanIUse

2.内核版本号升级到362xx版本。可以根据UserAgent判断当前环境是否已升级到 TBS2.0版本,包含(TBS/03xxxx)字段。

那么怎么查看自己微信里的 TBS 版本?

用微信打开这个页面,检查TBS的版本号,0362xx 表示已更新。
页面的代码只有两句,为:

// 检测页面的核心代码
var resultDiv = document.getElementById('result');
resultDiv.innerHTML = window.navigator.userAgent;

3.CSS3属性支持增强:

  • 完整支持flex
  • 伪元素支持动画效果
  • filter: blur 有模糊效果

PS:更多更具体的支持情况可查阅这里

4.autoplay属性有效,可自动播放

5.canvas支持设置背景色

6.标准的缓存策略,支持Spdy 3.1

7.动画性能提升

8.更好的inspector支持

参考资料:

总结

常用工具

我们可以从中了解到什么

一、工具方面:

  • 可以通过查询UA来检测是否为X5-TBS/03xxxx,在线检测地址
  • 想知道某个CSS3属性,或者其他API在X5是否支持的时候,可以查询X5 CanIUse
  • 远程调试微信内页面时,在Android下可以使用微信远程调试工具-微信web开发者工具,在iOS下使用Safari远程调试即可。

二、对于开发调试页面

  • 目前,暂时还没有查找到X5在微信android客户端的版本分布情况的数据(可能是由于X5 tbs2.0 是今年4月份初才开始全量发布的)。
  • 虽然说,X5是静默升级,无需用户手动更新,基本上都实现升级为最新版本(业界说法),但仍存在X5内核是旧版本的情况(根据是部分测试的检测UA结果)。希望能够在后续的日子可以获取到相关的数据。
  • 手机同时安装了QQ浏览器和微信,但QQ浏览器内核版本不等于微信内核版本,只有在QQ浏览器内核为大于等于6.2版本才是Blink内核,调试页面的结果才可以替代在微信内页面调试的结果(想要不登陆微信用QQ浏览器来替代调试的需要注意下

X5的版本分布情况

据腾讯内部的小伙伴告知,x5内核基本覆盖理论上达到100%,但难免会有漏网之鱼。而根据实际数据抽样整理显示,截至2016年5月19日,x5内核基本覆盖率达到91.47%。

ddzy commented

学到了