Web前端性能优化项目

前段时间，为自己的三年前负责的WEB产品重新作了一次性能优化，回顾到3年前的那些日子，W3C标准在国内仍处于萌芽状态，Table布局泛滥于中国互联网各大大小小互联网产品之中，W3C标准只是个互联网时尚的代名词。截到今天为止，W3C标准已不在是一种口号，而是实现的依据和标准。

推动WEB前端性能优化，我觉得需把握以下关键三要点：

1. 提升WEB前端响应性能，性能为王。没有速度，就会失去用户，这是用户体验的基石之一；
2. 易于维护，内容与表现合理地分离。这是一个敏捷的时代，产品的更新维护和团队的协作更讲究的是效率。
3. 符合满足SEO的要求，你的产品不是只为自己和客户服务，更要为我们桥接于用户的搜索引擎服务，只有这样你才能有收益，才能有后期的ROI和转化率。

作为以网络起家的YAHOO及其性能团队，所总结出来的2/8原则已成为WEB前端性能优化法则：只有10~20%用户响应时间花在从Web服务器获取HTML文档并传送到浏览器中。其余的80%~90%时间花在下载页面中的所有组件中。

基于以上的结论，我们很有必要去关注WEB前端性能，并通过各种方法去改善提升它。如将后端响应执行速度提高一倍，整体也只能减少5~10%，而关注前端性能，同样减少一半，那它带来的整体响应速度将可减少40~50%。

优化指导

由于当年实施该项目时的历史原因问题，给前端性能方面埋下了不少的弊端，以下是我负责整个优化实施的优化指导。

前端性能优化更重要的是分析问题的方法、思路和细节的把握。因项目保密原因，请原谅我以下资料提供的完整性，仅供参考：

优化结果

一切的努力也同样需要数据来说话，这是优化前后的对比。

备注：数据来源于：http://tools.pingdom.com/ 及 YSlow

其实整个性能来说几乎可做到YSLOW的A，遗憾的是CDN方面仍有所欠缺。