何俊谈阿里巴巴前端性能优化最佳实践-笔记

网站页面前端优化对网站核心页面基于Wise load的原则作定点性能优化，减小HTTP请求，减小DNS请求时间，减小页面DOM的数量，作一些图片、JS压缩等。减小HTTP请求方案：阿里开发了自动合并CSS和JS静态文件的框架，对于减小页面DNS数方面采用前端延迟加载框架，主要负责页面加载时只加载首屏，用户滚动页面时才加载二屏或三屏，这样对网站的性能包括流量都是很大的提高和节约。

Web I/O（高并发）方面的优化，使用高性能Web服务器，另外在冬天页面处理上，尽量地减小冬天页面所占比例，采用一些动态页面静态化技术，例如反向代理技术，页面片断的局部缓存像ESI（Edge Side Include）这样的技术，加快Web请求。

小知识：ESI是一种数据缓冲/缓存服务器，它提供将Web网页的部分（这里指页面的片断）进行缓冲/缓存的技术及服务。由Oracle公司和Akamai Technologies公司制定规格，Akamai公司提供对应的信息传送的服务。

特色：

以往的数据缓冲服务器和信息传送服务以页为单位制做,复制到数据缓冲服务器中，因为其对应要求而进行传送,因此向网络软件等根据用户的输入,内容会动态地转变的网页传送信息的时候,就很可贵到高效率。

因为在ESI中是部分地缓冲网页，使用基于XML的标记语言，指示想要缓冲的页面部分。由此，页面内分为动态地变动的部分和静态的不变动的部分(网站内的共通菜单等)，只将静态的部分有效地发送到服务器中。

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

目前在数据库方面咱们遇到的问题是海量数据的爆炸性增加，在这方面你们的思路基本是一致的，无外乎是数据水平切分和垂直切分。

在性能调优方面的一些最佳实践，包括特别须要注意的地方？

第一是咱们在作性能优化以前要制定很是详细的目标量化产出，首先要对性能现状作深刻分析，而后根据量化指标制定一些Roadmap，例如目前应用吞吐率、页面响应时间，咱们但愿经过性能优化在Q二、Q三、Q4分别达到一个什么样的性能指标，经过量化的性能指标作一些特定性能优化设计，有计划的性能调优效果会好一些。
     第二要防止过分性能优化设计，由于性能优化成本比较高，基本上优化到必定程度要考虑到投入产出比问题，过分的性能优化不只会带来浪费，甚至会致使架构更加负责，带来一些可维护性的问题。
      第三要注意性能优化是为用户服务的，性能优化有两个方向，一个方向是增长应用吞吐量，减小网络和应用服务器的投入，另一个方向是作一些用户体验方面的提高，例如前端优化，这两个方向我更倾向于后者，由于有数据代表，用户访问受到页面响应时间制约，页面每慢10%就会有等比例用户流失，因此前端优化不利致使商业上的损失远比后端优化节约的成本要多。

第四是性能优化会受到商业需求制约，不一样商业需求对性能优化要求不同，我举个例子，咱们在作前端优化时会作一些图片自动压缩，就这点来讲，不一样行业对图片质量要求不同，好比服装行业比机械行业图片质量要求高不少，因此咱们须要针对不一样行业设定不一样的压缩比，这也是咱们须要考虑的。
     此外还要考虑性能优化成果如何保持的问题，就是如何作持续发展的性能优化，咱们主要经过两个方面，一个方面是制定一些性能优化的最佳实践，向应用开发人员灌输性能的理念，让性能的理念深刻到他们平常工做中，另一个方面是实时监控系统运行状况，第一时间把出现的性能瓶颈解决掉，这样才能保持性能优化可持续发展。

阿里巴巴前端团队目前主要采用哪些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技术，由于内部人员的浏览器兼容不是一个很大的问题，咱们能够提示用什么样的浏览器来访问这些网站后台运营系统。

内容出自：InfoQ，Url：http://www.infoq.com/cn/interviews/hl-alibaba-front-end-performance-optimization