金擘:手机淘宝这三年

8月8日,由HTML5梦工场主办的第四届HTML5峰会暨攻城师嘉年华(iWeb峰会)北京站,会上淘宝前端技术专家 金擘(渚薰)表了《手机淘宝这三年》主题演讲。

以下是演讲实录:

大家好,我是阿里无线事业部,也就是手机淘宝的,真名叫金擘,他们在手机淘宝叫我渚薰。非常荣幸今天看到这么多小伙伴来参与我们的演讲,希望之后接下去演讲能给大家一些启示和帮助。

我为什么题目起手机淘宝这三年呢,原因是因为我在淘宝三年,也在业务上做了一些工作,从中可以为大家透析出手机淘宝技术上的一些发展,或者一些关键的点。首先,我调查一下,这里不用PC淘宝,用手机淘宝的人有多少?看一下。其实按去年双十一的流量来说,手机淘宝的占比已经基本超过60%了,所以现在大家可能利用一些碎片时间会更加喜欢在手机上购物和操作。


这张图不知道有没有同学见过,这是在2011年时候的手机淘宝的网站,当时还是以Web站为主,最早开始的时候,智能机还没有那么流行的时候,是用这样的Web站来呈现整个手机淘宝功能的。在这样一个背景下面,手机淘宝肯定也要走出Web的圈子,真正的走向我本来叫做拥抱553,拥抱HTML5,那时机蛮巧的,刚好我进入手机淘宝那一年,也就是2012年,我们手机淘宝就有了一次比较大的革新或者改版,从整个Web站变迁到HTML5,所以我沿着这条线,从2012、2013、2014讲一下手机淘宝的发展历程。


首先,看2012年,我列了几个关键字,当时比较流行的东西。比如说MVC、jqmobi、seajs,有人会问你用的哪些写的?你问的更多是这些,或者你技术选型的时候列的这几类框架,我把比较流行的关键词列了一下。当然,遇到了这些框架,我们其实就面临一些问题,我们到底选什么样的框架来为我们自己的网站服务呢?这其实在每个团队,你作为一个负责人也好,也是普通的码农也好都要面临的问题,我们在选择这个框架的时候应该怎么思考这个问题。我列了三个点,一个是社区、测试、气候。社区是什么概念呢?其实很简单,你选择的框架它整合社区也好,它的关注度,是否是符合一个活跃社区的标准。如果一个框架它并不活跃的话,可能维护和更新就比较慢,就会被我们淘汰掉。测试,这一环节,实际上每一个框架自己都会有一个,我性能比某某某高多少倍,但实际上在你自己尝试这个框架的时候,肯定有一系列的简单测试。我们去courage和perf。另外一个就是测试当中的兼容性问题,对于我们移动开发的同学来说,那时候会觉得PC端的兼容已经不重要了,当年还是安卓2.1、2.0时代的时候是比较突出的,这些问题也是大家在选择哪个框架的时候一个重要的关键点。


最后一个,就是气魄。也就是说每个团队的负责人在下定决心要使用哪个框架的时候,其实你是要有一定气魄的,你是要为选择这个框架,为这个团队负责,我们选择三个基础的框架作为手机淘宝开发的基础模块。backbone、zepto、seajs,我们做了这样的选择。时间关系,我们回头再交流。当我们选择了这三类框架以后,我们网站大概是为期三个月的时间,把我们HTML5站给上线了,上完线以后,可能对于我们的负责人来说,对于开发者来说会有一次回顾,这次回顾主要是用来干吗呢?问一下自己爽不爽,你用了这三个框架以后,你在整个开发过程中,你觉得爽不爽。因为我们开始测试,或者一些检验村崔是各方向的,我们在社区里面进行交流以后,从客观的角度上去决定了这个框架,但是到真正去开发的时候,可能会遇到各种各样的问题,遇到这些问题的时候,比如当时我们用CDS做配置,觉得它的loader和coche比较弱,我们做不依赖loader的版本管理,全局命名空间,回到了CDN combo,我们淘宝的CDN是有combo的机制的,我们用一个特定的表示方式把所有文件直接合并在一起,我们用这种方式来改变这些问题。


又回到backbone,这是一个简单的框架,实际上它在处理页面的定义的时候,它的生命周期会很弱。我们在处理这一块可能它的处理是比较,但这个时候我们就要改变page的定义和生命周期,我们简单写了一个mixsln的版本,新的版本出来了,老的版本不维护的阶段。我们把这三个框架替换成了爽的三个框架,我们自己的mixsln、zepto、no xMD,完全没有任何类似于这种机制的版本管理来做的一些事情,这是我们当时2012年的时候去完成整个手淘的技术点。所以说在当年我们其实处于一个阶段,也就是在各个框架当中打转,有的时候你觉得这个框架挺好我要用一下,有的时候觉得不好了,我要退掉。在选这个框架的时候,尽量是主观加上其他的客观因素选择你的框架。


说完2012年,我们走到2013年。2012年我们比较定性了自己的开发框架之后,我们就来做一些更加看起来非常的牛的几个东西。就是追求极致体验。怎么样追求极致体验呢?我又列了一些关键字,比如Hybrid、Retina、osl、smart、Banner,基于体验当中的问题,我总结出来了几点,首先是端。其实我们端的交互是比较丰富的,可能不仅仅只是客户端和HTML5,还有移动端和PC端,还有现实端和虚拟端。如果大家还记得的话,可能在2013年的时候淘宝出一个虚拟现实的小游戏叫《抓蝴蝶》,可以抓蝴蝶,拿红包。这是一个比较具体的虚拟、现实端的两端交互。2013年我们也是主要去追求,更加研究体验上怎么把手机淘宝做得更好,把HTML5做的更好。当时我们出了一个叫做wnes额这么一个东西,它实际上是解决方案。我们当时在做解决方案的时候,其实也是参照这些业界比较知名的解决方案去制定我们真正需要的是什么。这个解决方案,并不是有太多可以聊的,它只是解决一些细节的问题,比如你在客户端传递参数的时候,会遇到URL的限制怎么办,你把数据传给客户端了,如果造成内存的膨胀和泄漏怎么办?大家现在手机淘宝里面看到的内嵌的HTML5首页的话,都是用了这套技术。它可能比如和我们现在微信的都差不多类似,这是一个比较重要的点。解决了端交互的问题之后,我们当时苹果5,2013年开始发售,那个时候我们遇到了一个问题。我个人感觉,在苹果5之前,我们看网页是这样的,就是马赛克,感觉不清晰。那么这么不清晰的情况下,给我们的体验是非常差的。淘宝网站更需要给用户展示宝贝的图片,如果都是一些模糊的图片可能是不能忍受的。


在处理高清问题的时候,我们要普及一些简单的知识,我CSS里面的像素的单位,我在各个屏幕下它是怎么渲染的。在非retina它就是一个像素点,在2X,就是苹果5、苹果5S,3X就是大部分的安卓手机。它们在渲染1px的真实单位的时候,它的像素点是不一样的,3X它其实是一共有9个像素点渲染出来,这样你就会感觉你画出来的这一条1PX的线是模糊的,是比较粗的,它并没有显得那么清晰。我们研究出了这个,在meta  name=viewport。我们又来解决一个屏幕大小适配的问题。假如说我们苹果4的手机是280×40的,放到苹果6的手机上我们屏幕变大了,我们希望按钮变大一点。我们传统的用百分比,把这个宽度按比例撑开。这些方案在写的时候并不那么完美,我们觉得它还是用的不爽。在这种情况下,我们怎么解决这个问题呢?我们用了一个被很多人忽略的单位,就是html,根元素的文本的大小单位。我们在这个标签上把它font-size,我320的,那我280PX除以32,最终会得到rem的值,这个当我手机屏幕放大的时候,我是随着改变的,也自然而然的按照等比例大小进行了缩放,这个比较轻松的解决了元素等比例缩放的问题。我们最后把这套方案叫做灵活的可伸缩的弹性布局,下面有一篇文章和我们的链接,大家可以看一下。一篇文章是英特尔写的,大家可以去膜拜一下。


解决了这个屏幕高清的问题以后,我们进而去解决一些手持交互的问题。这一块内容其实从技术上来说深入的会蛮多,但是在表面看来就这些这么几个问题,一个单指,一个双指的手持。手机淘宝HTML5现在的首页用的这个手持库,我们自己写了一个库,加上这个手持库对整个网页进行模拟的滚动。这个酷它实际上解决了很多问题,比较深入的问题就是运动公式生成了贝塞尔曲线,滚动了多少距离,到停下,以及它的反弹,这个都是通过贝塞尔曲线去做的,当然贝塞尔曲线在动画里面就直接会用。所以说我们用这样的一个方式去把滚动的一个体验给做的比较接近原生的这么一个体验。还有一些边缘阻力的系数、点停问题,都是大家在使用过程中遇到的问题,我们一步一步的把这些问题解决掉了。我们既然用到了这个手势之后,很明显后来出现大家比较头疼的问题,就是卡。我刚刚用的动画、手势,遇到卡的问题怎么办呢?首先我们要去分析我们的DOM结构它是怎么产生的,其中有一个概念是复合层,复合层是比较消耗性能的DOM的点,它有一些产生复合层的关键点。之后我们就总结出来这么几点,能够减少我们在DOM节点上的复合层的产生,提升一个数量级。所以说整个性能上来说,它实际上分为三个分类,一个是交互、加载、动画。加载这一块我刚刚没有提到,我这边不是权威,可能做不了太多的解释。在交互、动画上,增强性的交互,vision、gesture、scroll,这个HTML5的体验会有一定的提升。


到了2014年,我们关注的目标是这些,ES6,这些都是跟我们的工程有关的。我们做的第一个事情就是把手机淘宝客户端的首页和手机淘宝HTML5的首页进行了同构,把它们长得一模一样,我们整个同构的过程是有一个统一的模板,对它进行解析和渲染之后产生两份代码,最终使我们整个客户端和HTML5的视觉上的体验达成了一致。这个是我们一开始做的一件事情,然后接下去我们就要做一条链,这条链从项目开始到整个发布的一条链,我们会有一系列的零碎的工具把它串联起来,在开发过程当中你就有更好的开发体验,你可以一键完成就可以了。后面我们进行调试的时候,可能有各种各样的工具帮助我们小伙伴们进行开发。


实际上,我们现在整个链是处在金字塔型的结构上的,最底层是一些服务的API,中间是基于API的,Gulb,上面还有Dev Chain,现在我们提供的是单一入口的东西。最最顶端的东西是程序员。因为时间关系,我讲的比较仓促,回头PPT发上去以后,如果有疑问可以对我们进行提问,我们也会跟大家回答。