何崚谈阿里巴巴前端性能优化最佳实践

转载：http://www.infoq.com/cn/interviews/hl-alibaba-front-end-performance-optimization

大家好，我现在在阿里巴巴园区采访阿里巴巴中文站架构师，兼B2B网站优化领域的负责人何崚。何崚你好，请简单介绍一下你自己。

我叫何崚，2006年加入阿里巴巴。之前一直在中科院下属的两个基因方面的研究所，从事一些基因方面的研究。加入阿里巴巴对我来说是一次转行。我在加入阿里巴巴以后，主要是负责中文站的一些架构设计。

我们知道何崚是阿里巴巴B2B网站优化领域的负责人。首先关于页面前端优化这部分，请谈一谈你的主要经验以及针对一些难点问题的解决方案。

目前我们网站页面前端优化主要有两个方向。第一个方向是对网站核心页面基于Wise load的原则做定点性能优化，这方面无外乎就是减少HTTP请求，减少DNS请求时间，减少页面DOM的数量，做一些图片压缩等，大家的思路基本是一样的。值得一提的是，针对特定方向前端优化，阿里巴巴社区开发了一些自动化性能调优工具，例如刚才提到的减少HTTP请求的问题我们开发了一个自动合并CSS和JS静态文件的框架，对于刚才提到的减少页面DOM数这方面我们也有一个前端延迟加载框架，主要负责在页面加载时只加载首屏，用户滚动页面时才去加载二屏或三屏，这样对于网站的性能包括流量都是很大的提升和节约。

我们知道Web I/O也是一个优化很重要的方面，有没有需要特别注意的或是有哪些好的解决方案？

Web I/O在我们网站高并发的应用场景下会有明显的瓶颈。为了提高网站高并发处理能力，我们可以去尝试一些高性能的Web服务器。另外在动态页面的处理上，尽可能地减少动态页面所占比例，要采用一些动态页面静态化的技术，例如反向代理缓存技术，例如页面片段的局部缓存像ESI（Edge Side Include）这样的技术，来加快我们Web请求的处理。

在应用调优这一块是如何做的？

关于应用调优，大部分Web应用的性能瓶颈都来自我们程序员实际编码中一些不好的写法。这点我们可以通过一些profile 工具定位性能瓶颈，例如应用堵塞XML解析，我们能够拿到性能瓶颈列表，然后再针对这些性能瓶颈做一些性能调优。在阿里巴巴，我们线上应用已经部署了一些基于字节码增强进行网站实时监控的脚本，它可以实时抓取应用堆栈以及一些运行情况，这样我们第一时间就能掌握到应用的瓶颈，从而做一些有针对性的调优。

如果有问题，是你们及时反馈给开发团队让他们去调优，还是他们会自己去找问题再反馈给你们？

实际上我们现在的性能监控脚本会定时把线上一些性能情况通过邮件发送给应用负责人，是应用负责的具体团队，主要是由他们来主导做这部分的性能调优工作。

你们就是负责去找到问题？

我们负责性能优化的一些基础框架的设计，负责提供技术上支持，包括新优化最佳实现支持。

另一个在性能调优方面比较重要的地方是数据服务层调优，请在这方面也和我们分享一下你的经验。

目前在数据库方面我们遇到的问题是海量数据的爆炸性增长，在这方面大家的思路基本是一致的，无外乎是数据水平切分和垂直切分。此外我们也会采用一些硬件方面的技术，例如SSD三寸盘的使用。目前我们的网站在网站应用和数据库之间构建了一个统一的数据服务层，这层主要是一些热点数据缓存，包括查询并行化。什么是热点数据缓存？我们的网站商业数据都有行业分布性，有一些特定的热点，我们会通过改进缓存命中率算法来提升网站数据访问效率。刚才提到查询并行化，在一般网站应用中，页面有多个查询是一个串行执行过程，我们通过框架进行支持，能够使这些查询并行化，这样我们整个页面数据请求耗时只受到最慢查询的制约。目前的难点主要还是如何提升缓存命中率，需要不断地测试。此外在数据服务层还有一个很重要的功能，是对大的业务模型做数据路由的功能。

什么是数据路由功能？主要是因为几个大的业务模型不同字段分布在不同数据源里，这部分通常是由应用开发人员自己维护。现在，我们希望在统一数据服务层里做一层封装，然后隔离底层物理部署。另外，我们会针对数据服务层的性能调优进行封装，例如不同查询，不同的条件，它适合的数据源是不一样的，在特定条件下，它更适合从搜索引擎里获取，这方面如果完全由应用开发人员把握，对他们的要是是比较高的，所以我们希望把这些最佳实践规则在我们统一数据服务层里做一层封装，对应用开发人员做透明化处理。

请给读者简单分享一下在性能调优方面的一些最佳实践，包括特别需要注意的地方。

最佳实践主要有几个方面。第一是我们在做性能优化之前要制定非常详细的目标量化产出，首先要对性能现状做深入分析，然后根据量化指标制定一些Roadmap，例如目前应用吞吐率、页面响应时间，我们希望通过性能优化在Q2、Q3、Q4分别达到一个什么样的性能指标，通过量化的性能指标做一些特定性能优化设计，有计划的性能调优效果会好一些。

第二要防止过度性能优化设计，因为性能优化成本比较高，基本上优化到一定程度要考虑到投入产出比问题，过度的性能优化不仅会带来浪费，甚至会导致架构更加负责，带来一些可维护性的问题。

第三要注意性能优化是为用户服务的，性能优化有两个方向，一个方向是增加应用吞吐量，减少网络和应用服务器的投入，另外一个方向是做一些用户体验方面的提升，例如前端优化，这两个方向我更倾向于后者，因为有数据表明，用户访问受到页面响应时间制约，页面每慢10%就会有等比例用户流失，所以前端优化不利导致商业上的损失远比后端优化节约的成本要多。第四是性能优化会受到商业需求制约，不同商业需求对性能优化要求不一样，我举个例子，我们在做前端优化时会做一些图片自动压缩，就这点来说，不同行业对图片质量要求不一样，比如服装行业比机械行业图片质量要求高很多，所以我们需要针对不同行业设定不同的压缩比，这也是我们需要考虑的。

此外还要考虑性能优化成果如何保持的问题，就是如何做持续发展的性能优化，我们主要通过两个方面，一个方面是制定一些性能优化的最佳实践，向应用开发人员灌输性能的理念，让性能的理念深入到他们日常工作中，另外一个方面是实时监控系统运行情况，第一时间把出现的性能瓶颈解决掉，这样才能保持性能优化可持续发展。

前端调优和后端调优如何协调配合？

前端调优和后端调优是密不可分的，前端调优有时是通过后端调优方案实现，比如我们常遇到cookies过大的问题，它会导致网站web请求经过多个TCP包才能传到应用，针对这点，常见的思路就是用服务器端的cookie实现，实际是用后端技术来解决前端优化的问题。此外，前端优化也可以成为后端优化实现的手段，例如网站上传图片会对图片进行压缩，以往压缩是在服务器端实现，现在我们把压缩移到客户端实现，节约了服务器端的很多运算资源，这是通过前端优化手段优化后端的一个典型例子。所以，在对网站的核心页面优化时，我们采取由UED和开发人员结对优化的方式，一起讨论页面瓶颈在哪里，优化方案是怎么样的，通过前端优化和后端优化相结合达到优化目的。

阿里巴巴前端团队目前主要采用哪些JavaScript框架做应用开发，为什么选择这些框架？

据我了解，目前我们采用了YUI和jQuery这两个JS框架。采用这两个框架主要考虑到以下几点：第一，我们希望JS框架是一个比较轻量的，比较小的框架，它的库文件比较小；第二，我们希望JS框架的浏览器兼容性比较好；第三，我们希望JS框架有比较好的可扩展性，这样就可以快速定制一些UI组件；第四点是很关键的一点，性能要比较好。目前我们使用的JS框架遇到版本升级的问题，当我们决定对使用的JS框架做升级或替换时，我们发现由于API变动，前端有大量页面需要修改，所以现在正在做的事，是在JS框架之上做一层封装，做统一代理层，提供一些稳定的API给前端页面，然后我们会在这层做一些性能优化，包括安全方面的代理工作，有了代理层，甚至可以透明替换JS框架，这是第一点。第二点，目前正在开发一些具有深层次用户体验的UI组件，比如刚才提到图片上传的自动压缩组件，另外还有一些很炫像相册这样的组件，这对于丰富用户体验是非常有意义的。

目前前端开发团队面临的主要挑战是什么？他们有哪些解决方案？

他们目前面临的挑战，除了刚才说的性能问题以外，更多的是开发效率的问题，包括一些代码质量问题。可以分三个阶段来讲，第一个阶段是开发期，开发期面临的主要问题是编码和调试如何更加有效，我们目前正在开发一套基于插件的IDE框架，支持前端代码快速开发和调试。第二阶段是测试期，怎么减少测试投入的人力成本，因为我们知道前端测试对于人力成本投入是非常大的，例如比较复杂具备多种表单验证条件的一个表单设计，这方面我们正考虑一些自动化测试技术，这种前端测试自动化能够自动去测试JS编码，通过录入脚本实现关键页面的反复测试。第三阶段是运行期，如何对线上页面性能包括代码质量进行快速监控，我们在全国各地各个网段都部署了脚本模拟访问前端页面的实际情况，会监控一些性能指标，包括代码异常等，然后生成一些报告通过邮件发给我们，我们会在第一时间处理这些问题。

下面我们谈一下目前比较热的一个技术话题HTML5.我们知道最近W3C宣布将在2014年正式推出HTML5规范。阿里巴巴前端团队如何看待和应用HTML5？

据我了解，目前有些应用已经采用HTML5了。例如我们网站有一个基于web的即时通讯软件，它就用到了HTML5的Web Sockets技术。像HTML5里客户端存储，其实我们也用到了，网站有很多应用场景，例如您最近一个浏览记录，如果不是很重要的数据就非常适合存放在HTML5的客户端缓存里。另外我们目前正尝试用一些HTML5新标签，例如布局方面像<nav>、<header>、<footer>这样一些标签，好处就是标签更加语义化，以往我们实现布局要基于盒子模型，通过<DIV>设计页面布局，现在有了语义化标签，对于SEO是很有好处的。我们也在尝试使用表单相关标签，HTML5新提供了表单验证语法支持，以往要写一大堆JS代码，现在采用HTML5技术很容易快速实现。此外，还有画布<canvas>标签，我们网站现在目前有很多柱状图、饼图这样的统计图表，我们现在用Flash来实现，以后也会考虑通过<canvas>标签实现。

如何处理多种浏览器对HTML5的支持问题？

浏览器兼容性问题确实是一个比较大的问题。因为我们知道目前IE系列的浏览器对HTML5基本不支持。我们通过几个方面来解决：第一，采用一些第三方特性来支持，例如<canvas>标签在IE下是不支持的，我们可以采用google-excanvas这个组件让IE支持；第二，在一些不兼容的浏览器里做一些低级效果替代方案，例如CSS3的圆角效果，在IE里就直接显示直角；第三是一些文本提示，有意识地引导用户使用兼容的浏览器，我们会在页面关键位置通过一些指导性信息提示用户如果采用特定浏览器会获得更好的用户体验。目前为止，我们更多地在网站主要是面对我们网站运营的后台系统尝试使用一些HTML5技术，因为内部人员的浏览器兼容不是一个很大的问题，我们可以提示用什么样的浏览器来访问这些网站后台运营系统。

阿里巴巴对Silverlight、Flash、HTML5之间的纷争怎么看？从技术角度如何选择和评价这些产品技术？

Silverlight目前市场占有率包括插件安装率还比较低，所以阿里巴巴暂时没有很大采用。Flash和HTML5，我的看法是这样，因为目前HTML5确实有浏览器兼容问题，尤其是IE系列浏览器不兼容，而Flash插件的市场占有率非常高，所以现阶段，我们的核心页面如果要做深层次用户体验，我们首选Flash。但随着HTML5的发展，它本身具有开放性优势，预计HTML5市场份额会逐步提高，尤其是IE9上线后会支持HTML5。此外，我们注意到有些手持设备目前不支持Flash，它们倒向HTML5阵营。根据统计，通过手持设备访问网站的用户群在不断增加，所以我们非常重视这批用户的体验。所以，现阶段我们在前端的深层次用户体验上，对核心页面首选Flash，但在一些非核心页面会尝试使用一些HTML5技术储备，我们会密切观察HTML5技术的发展，包括市场占有率的变化，逐步提高HTML5技术页面的比例。