网站页面前端优化对网站核心页面基于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，例如目前应用吞吐率、页面响应时间，我们希望通过性能优化在Q2、Q3、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>标签实现。
浏览器兼容性问题确实是一个比较大的问题。因为我们知道目前IE系列的浏览器对HTML5基本不支持。我们通过几个方面来解决：第一，采用一些第三方特性来支持，例如<canvas>标签在IE下是不支持的，我们可以采用google-excanvas这个组件让IE支持；第二，在一些不兼容的浏览器里做一些低级效果替代方案，例如CSS3的圆角效果，在IE里就直接显示直角；第三是一些文本提示，有意识地引导用户使用兼容的浏览器，我们会在页面关键位置通过一些指导性信息提示用户如果采用特定浏览器会获得更好的用户体验。目前为止，我们更多地在网站主要是面对我们网站运营的后台系统尝试使用一些HTML5技术，因为内部人员的浏览器兼容不是一个很大的问题，我们可以提示用什么样的浏览器来访问这些网站后台运营系统。
内容出自：InfoQ，Url：http://www.infoq.com/cn/interviews/hl-alibaba-front-end-performance-optimization
何俊谈阿里巴巴前端性能优化最佳实践-笔记,布布扣,bubuko.com
原文地址：http://www.cnblogs.com/yeefan/p/3777027.html
