天猫11.11：移动端网络性能提升两倍

作者  郭蕾

据阿里巴巴提供的数据显示，在双十一开始后的三分钟内，天猫平台的销售额就超过 10 亿元，其中移动端占比超 70%。惊人的数据背后需要有强大的技术做支撑，移动客户端需要保证在高并发场景以及不同的网络环境下为用户提供顺畅的购物体验。在双十一当天，InfoQ 有幸采访到了阿里巴巴无线事业部技术总监南天，并与他探讨了阿里巴巴在移动端方面的技术突破。南天目前负责手机淘宝和移动基础平台的研发建设，在移动方面有非常丰富的经验。

InfoQ：刚才大家一直在讨论移动端的交易额，非常震惊。这么大的交易量，能具体说说手淘针对双十一做了哪些优化么？

南天：我们确实做了很多的优化，但我觉得不能简单的说是针对双十一的优化，今年手机淘宝（以下简称手淘）发生了很大的变化。对一个网站来说，双十一的挑战在于高流量到来的时候，峰值系统的稳定性、响应能力和可伸缩性。但是对于移动端来说，我们需要保证高并发访问下客户端的流畅性。从产品形态来看，手机淘宝过去就是一个简单的移动端购物类工具，提供的功能大体是搜索、下单、查看商品信息。而现在的手淘进一步的扩大了业务范围，电脑上所能看到的所有产品形态，都会移植到手淘，以满足消费者多样化的消费需求。

当然，随着业务的快速膨胀，代码量也在快速增长，之前的架构已经不能很好的支持业务的快速发展。今年上半年我们做了手淘成立以来最大的一次技术架构的重构，引入了很多服务端架构的重构思想，把整个手淘 APP 重构为一个大的、容器式的开放平台。这样的架构既能够快速集成各个团队的开发成果，也能隔离功能模块，部分模块出问题不会影响整体的 APP 性能、稳定性。随着这样的变化而来的是整个开发模式的变化。手淘从原来集中式的研发，变成了可以做多个团队并行迭代的研发模式。这样的改变之后，整个研发的效率、研发的质量都有极大程度的提升。

InfoQ：您上面从架构、团队等方面进行了剖析，能介绍下技术方面的一些突破么？

南天：我们今年针对手淘的消费者端做了很多的性能优化。单从性能方面而言主要可以分为两部分，一个是基础网络优化，由于地区和设备的不同，移动端的网络环境也各不相同。我们针对网络协议做了精简和优化，同时也尝试引入了 SPDY，以最小化网络延迟，提升网络速度，优化用户的网络使用体验。通过对网络的优化，上半年网络的性能提升有近两倍，效果非常棒。

第二个是移动端特有的一些优化，如安装包大小、功耗、网耗。 很多用户在下载新应用时，会考虑到安装包的大小。基于之前的架构，我们将手淘改造为一个插件式的平台，平台可以按需加载相应的模块。同时通过图片压缩、代码去重等将 Android 的安装包从 40M 缩减到 27M。从这个点上来说，我们探索到了一个可以持续优化安装包大小的思路，未来手淘的安装包大小可以可能还会继续往下降，比如降到 20M 以下。除了这个之外，还包括功耗、网耗方面的优化。在每一次版本上线之前，我们会通过模拟用户来模拟真实用户的使用情况，进而监控它的消耗是多少。另外我们会监控应用静默期的电量和流量消耗数据，通过对监控数据的分析，来确定应用功耗和网耗上是恶化还是提升，以决定这个版本要做怎样的改进、要不要如期发布等。

InfoQ：我留意到手机淘宝不仅支持新发布的 iPhone 6，并且还支持很多低端的 Android 机，适配方面做的这么好，能不能和我们的读者分享下经验？

南天：首先手淘有一个 100 多台真机的适配实验室，针对这 100 多台机器，我们会通过脚本跑自动化的测试来模拟用户的点击，以统计某个版本在不同的机型、不同的操作系统上的运行情况。这一块是自动化的过程。除此之外，我们会扫描 API 在不同机型、操作系统上的兼容情况并记录到知识库，从扫描结果中我们可以看到某个 API 的表现是否符合我们的预期，如果不符合预期，我们会杜绝相应 API 的使用。同时我们会监控灰度期用户的反馈。用户使用什么样的机型、网络在什么地方碰到什么问题，我们快速针对这个反馈做改进。

另外，对于一些低端的机型做了特殊处理，我们会单独派发某个稳定版本的 APK，这个稳定版本基本不再会添加额外的功能。同时我们也会配合网络方面的优化来提供一个更稳定的购物体验，比如在 2G、3G、弱移动网络的情况下，可能加载的内容以及交互方式都会不一样。

InfoQ：手淘的活动页面有非常多的图片内容，但是在双十一高峰期间用户体验还是特别流畅，这块有用什么特殊的技术么？

南天：所有的活动页面，我们都是基于 HTML 5 的技术做的。但是 HTML 5 在移动端的体验有很多问题。无论是从渲染还是网络，HTML 5 的调用栈都非常长，我们针对其做了很多的优化。比如图片，在不同网络环境下加载的图片其实是不一样的，我们会针对图像的编码做一些优化，给用户一个清晰度更高，但又兼顾用户网络性能平衡的选择。

同时我们也会使用优化过的网络库替代 WebKit 的通讯方式，并优化 HTML 5 渲染图片的过程。在手淘中，所有的 HTML 5 页面，都是放在自己的 HTML 5 容器中，这个 HTML 5 容器提供了很多跟 Native 互动的通讯能力，解决了对 GPU 的调用问题，以提升渲染能力。当然，通过 HTML 5 容器的方式，页面的兼容问题也会随之解决。

图片部分的处理其实还是之前提到的针对内存按需加载的方式，我们会根据手机内存来确定一次加载多少个图片，剩余的图片可能会做异步预加载处理。同时我们对很多原生的前端控件也做了修改，比如像滑屏的控件，它本身是当滑屏停止时才去做图片加载。而经过我们修改后，它就可以随着滑屏的过程实时加载图片，这极大程度提升了我们的浏览体验。

InfoQ：双十一中有很多的营销活动，非常有意思。我想这样的游戏也渐会成为营销的趋势。能介绍下手淘在游戏方面的一些工作么？

南天：是的，我们基于 HTML 5 的容器实现了营销互动的小游戏。移动端存在很多 PC 互联网不具备的能力，比如传感器、语音交互、图像能力。我们今年的开发过程中，也非常强调如何把移动端的能力更好地和我们的业务相结合。以红包么么哒为例，客户端可以扫描人脸，通过图像识别技术，我们能够识别人脸，并将人脸替换为一个红包，以增加营销活动的趣味性。这是在产品层面上的一些创新。

技术上不同的平台会对应不同的技术，比如 Android，我们用了 Box 2D（愤怒的小鸟使用的物理引擎），它相对来说还是比较成熟的，但是使用中我们也碰到很多问题，比如 Box 2D 对外封装的一些 API 并不太友好，所以针对不同的机型，我们也做了很多优化。在 iOS 中，我们使用到了 Sprite Kit，借助它我们可以用很小的成本构建一个重力的世界。可能这些组件都会有很多不成熟的地方，比如会导致应用 Crash，我们也重点努力去解决这些问题。总体来看，游戏方面的技术选型还是以开源或者原生的组件为主。

InfoQ 接下来将会详细剖析阿里巴巴在移动客户端的几个突破性技术，包括网络优化、游戏引擎、HTML 5 容器，敬请期待。另外，读者可以关注南天团队的微信公众号（微信号：MTT 手机淘宝技术团队），他们将会定期分享最新的移动开发技术。

本文链接