打开网易新闻 查看更多图片

还要多久,Html5可以成为移动端之王?喊出这一句,过去有点疯狂,现在有点渴望。

2016年4月,腾讯这位几乎拿住了中国社交和娱乐的大佬发声了,腾讯浏览服务(下文简称TBS)2.0上线了。一位搞社交和娱乐的大佬,需要开个发布会郑重推出这个服务到底是做什么文章?我们不急着找答案,先看看这TBS 2.0是什么。

其实,早在2014年,腾讯就已经推出了浏览服务开放平台,那时候,腾讯浏览器产品部总经理钟翔平,腾讯浏览器产品部副总经理莫沙,腾讯浏览器产品部副总经理叶骏同时与会,讲道,这个平台是基于X5浏览内核的,是针对当时WebView(可视为浏览器内核)“适配成本高、不安全、不稳定、耗流量、速度慢、视频播放差、文件能力差”等七大弊病,提出的一个解决方案。也是腾讯花了6年时间改善Html5生态的第一个作品。等等,腾讯花了6年改善一个Html5生态,应该不是小文章。果不其然,今年又推出了TBS 2.0,一个更加完善的改进Html5生态的解决方案。然而这可能还仅仅是个铺垫。

作为一个程序员,笔者已经迫不及待要分析下这个TBS的技术内涵了,毕竟一个程序员眼里,一切的一切,都能在技术突破中找到答案。这次新发布的平台特性主要有以下几个方面。第一,浏览器内核升级到Blink内核,对CSS3的支持更加完善,加强对Html5的支持,尤其是提升了决定游戏体验的Canvas和WebGL的性能。第二,推出了结合了微信Web开发者工具后的新版开发工具,支持远程调试,可以很方便的适配页面。第三,整合了数据分析结果,让应用了TBS服务的用户,有可能享受到来自整个TBS生态的众多APP的数据分析结果,有望实现真正的数据共享生态。第四,提供了TBS广告框架,用户可以籍此接入腾讯广告联盟,在自定义内容页面接引广告,并且用户独享广告营收。

本文笔者着重分析浏览内核方面的内容。

浏览器内核(引擎)到底有多重要?

我们可以先看看浏览器内核的过往和日常。有时候我们会把浏览器内核称为展现引擎或者渲染引擎等等。实际上不管叫做哪个名字,它的内部工作机制都十分复杂,并且是由许多模块组成的。细分起来恐怕只有以色列的那位神奇女孩塔利·加希尔能够如数家珍。毕竟一头栽进浏览器,就会遇到超过400万行代码和两万多个文件,也有某些版本甚至超过了800万行代码。笔者不敢涉及所有这些细节,这里只能从基本的逻辑入手拆分一二。首先大约有这么几个主流浏览器,分别是FireFox(Gecko内核),Chrome(Blink内核),IE(Trident内核),Safari(WebKit内核),Opera(Blink内核)。其中Blink内核是从WebKit内核中分拆出来的一个分支。他们俩也正是这里的主角。

他们都在干哪些日常工作呢,不管是什么浏览器,总之要向着网络的某处发出请求,并且把返回的东西展现(渲染)出来。这里主要讨论渲染这部分。我们暂时不考虑canvas和WebGL的情况。如果浏览器得到了正确的响应,那么就开始一系列忙碌的工作了。首先,把返回的好大一个字符串给解析成一个DOM树;其次,再将这些东西配上CSS信息等生成一个渲染树,注意,有可能还要分层;最后真正的“绘制”这个渲染树。我们才能看见网页的结果。听上去并不复杂,不过涉及到的东西就多了,譬如,HTML解析器,CSS解析器,词法分析和语法分析,当然了,别忘了最重要的一点,容错机制。我们不去深究代码实现了,到此为止,有几个重点已经浮出水面,第一,各种解析,分析,翻译,结构化,绘制的过程中每一个细节,都决定了性能;第二,浏览器在最终呈现内容时调用的系统接口,以及如何操作GPU,如何优化多核CPU等情况,都决定着性能;第三,面对整个Html和CSS为代表的标签系统时,如何处理一些不太标准的标签,也就是容错机制,决定着强壮性。题外话,Blink内核的名字就让人想起一个争议标签<blink>。第四,同一个标签,到底怎么实现其行为,又是一个复杂的话题。

问题来了,这么多种不同的浏览器内核跑在那么多种不同的机器平台上,譬如X86,MAC,PowerPC,ARM等等;而这些机器平台上又装着千奇百怪的操作系统,至少这里我们无法忽略Android的那么大一个家族和特立独行的iOS。这些系统上的浏览器到底能不能平滑的按照我们的意图把同一个网页展现出来?悲伤的答案如期而至:不能。怎么办呢?

一个强大的,易用的,市场占有率高的浏览器内核必须响应历史的潮流在此刻登场。就目前来看,Blink是很好的。至少他在实战中无论是对于Html5、CSS3的支持,还是对于Canvas和WebGL的性能都是不错的。如果我们能有一个平台把Blink好好的跑在各个机器上,而不要去理睬那些机器自己带来的各种怪异的原生内核,不是很好吗。这就是TBS 2.0引用Blink并全面推行统一的浏览器内核的原因啦。让程序员只用去思考屏幕的大小,是终极目标。

由腾讯TBS2.0服务展望移动互联网未来格局

关于浏览器内核的事情就说这么多,该从TBS2.0服务稍微展望一下未来了。

前文提到,腾讯用心六年并优化两年的TBS服务,仅仅是个铺垫。这么说是因为有更加重量级的产品会随之到来,那就是“微信之父”张小龙亲承的“应用号”。并且他提到,要让用户关注应用号就像安装了一个APP一样!我们结合上文的TBS服务,将整个产品图景联合起来,不难想象:TBS服务是支撑Html5页面的服务,微信“小程序”是一个Html5页面APP的入口,所以微信“小程序”才是真正的主角。

微信作为一个时代的代表,如日中天,他们必然不满足于聊天社交、游戏娱乐和内容传播这些旧有的形式和职能,必须要做点革命性的事情。没错,就是改变移动平台APP的格局,让那些原生APP不再是主角。取而代之的是更加轻巧灵便的Html5页面APP,而且这一次,微信亲自作页面APP的“市场”,直接提供页面APP的入口,更会基于QQ浏览器,结合TBS服务,提供完整的开发、调试环境,甚至可以一键将开发好的页面APP发布到微信“小程序”,完成一个闭环。让我们身临其境的想象一下:调试代码就像在Chrome上开发网页,发布APP又远比上APP Store这样的应用市场要轻松,同时没有了Android各个版本的适配大坑;而用户无需下载,只需要在微信内搜索应用,一键关注,所见即服务。

现有的微信版本中,我们已经可以在自己的“钱包”中看见许多的应用,那么推出应用号的意义难道就只是将这些应用从“钱包”中取出来吗?笔者认为,其真正意义在于将社交和服务对接起来。没错,我们关注一个微信号,如同建立了一种社交关系,除了简单的交互和获取优质的内容以外,如果能直接获取到服务,那么APP就不在是“市场上”的“货物”,而成为了一种流转在社交媒体中的新型商品。能够承载和传播内容与服务的同时,又具备APP的功能性的技术,只能是Html5这样的网页;而承载这种新型商品的载体,必须是具备了TBS平台这样的底层支撑的社交媒体,那又非微信莫属。

笔者进而大胆设想,未来手机也会因为这样的改变而成为最大的浏览器,通过手机窗口不但能获取如原生APP般的功能、浏览内容、社交娱乐,而且能搜索、享受、传播服务。可是谁会来打破各个原生APP间的边界,谁又能抹平各个硬件平台的差异呢?此时笔者的心声已经不是Html5何时成为移动端之王,而是,移动端利用Html5何时开启下一个时代。

至此,全人类已经和平了吗?笔者自知,又触碰了一个潘多拉魔盒,那就是由来已久的原生APP和Html5页面APP的战争。

笔者个人认为,Html5页面APP从未想要杀死原生APP,正如PC上的浏览器并未杀死PC桌面软件,亦如手机并未杀死PC……只不过时代的舞台,不同的主角相继上场而已。相反的,每一个时代的主角登场的时候,都会去拥抱各个角落。这一点,看看现在手机上的大APP,哪个不加上几个Html5的页面呢。这些页面的灵巧和便捷,正在拥抱我们的日常生活。

面临微信“小程序”和即将发生变化的移动平台APP格局的革新,包括笔者在内的“老”程序员,何必去拒绝这个时代呢,Java很好,Objective-C也很有魅力,那么javascript就不性感吗?