阿里巴巴 web前端性能优化进阶路

Web前端性能优化WPO，相信大多数前端同窗都不会陌生，在各自所负责的站点页面中，也都会或多或少的有过必定的技术实践。能够说，这个领域并不缺少成熟技术理论和技术牛人：例如Yahoo的web站点性能优化黄金法则，以及大名鼎鼎的优化大师Steve Souders。本文并不是一篇讨论性能优化技术方法的文章，而更多的是对中文站搜索List页面持续两年多的前端性能优化实践的思路总结。但愿对正在从事这个领域研究的前端同窗能有所帮助。

简单的说，咱们的性能优化实践分为三个阶段：初探期、立规期、创新期， 每一个阶段大概持续半年左右，有足够的时间造成一些优化思路的沉淀。

一：初探期 

2010年末咱们开始接手搜索List页面，这是中文站历史最为悠久的页面之一，当时它的生命体征正如它的年龄同样，很是虚弱：当时的基调网络监控显示，页面的彻底加载的时间是16秒！做为以“快”为核心业务指标的搜索页面，这个状态显然已经是没法承担重任了。

性能是必定要优化的，但咱们也面临着大多数前端同窗所面临的共性问题 — 业务需求紧张，何况咱们是刚刚接手这个业务，很是不熟悉，别说是优化了，就是作个小需求也都常常出现线上故障。就是在这样的状况下，咱们开始了搜索页面的 性能优化之路，而且给本身定下了当时看起来很是难以实现的目标：在2011年年中前把全页面加载时间下降到7秒如下。

咱们很快成立了一个性能优化小组，3-4个前端同窗参与其中，一我的的力量毕竟有限，尤为是应对这样一个历史业务繁多的页面。参与的同窗多些，技术氛围也相对浓烈，你们很全面的分解了目前页面上出现的性能瓶颈，并分别领取了本身的优化任务。

在这个阶段里，咱们基本是照葫芦画瓢，把雅虎性能优化的那些法则与咱们的页面一一对照，完成了许多优化点，例如：

• 小图片的合并，造成CSS Sprite，并优化图片
• 模块的异步加载
• 图片的懒加载
• CSS文件引用放在页面顶部，JS文件引用放在页面底部，并对代码压缩
• 缩小cookie体积
• …

前人的技术理论果真是靠谱，通过咱们半年时间加班加点的性能优化后，咱们奇迹般的达成了优化目标！（附性能曲线图）

 

 

众多优化点中，对优化效果贡献最大的就是对图片的处理，包括了CSS sprite的合并及图片的懒加载，说白了就是雅虎性能优化法则的第一条：要尽可能地减小HTTP请求。说实话，CSS sprite合并这块的体力活较多，但前端同窗必定要引发重视，对页面性能影响确实很大。

 

 

初探期优化经验所得：

一、优化前，普遍地获取该领域的各类优化思路。有条件的同窗能够参加下WPO领域的一些会议，比较推荐 Velocity性能优化大会。

 

 

二、   成立性能优化组织，明确性能优化目标。

 这一点很是重要：可量化的目标以及可持续跟踪的优化数据是性能优化工做得以持续进行的保障，同时也是源动力！你们能持续这么长时间迭代的进行优化工做，正是由于每一个阶段咱们都有相应的性能优化目标做为指引，并有志同道合的同窗一块儿努力。

 

 

三、持续追踪性能数据，要选择合适的页面性能测量工具，一旦选定后，再也不更换，以保证历史数据的可参照性。

咱们一直在使用 基调网络，不得不说仍是很是专业的，不过是收费工具。 给自家的测试工具也打个广告吧，免费的测量工具– 阿里测。国外的测量工具也挺多的，不过受网络因素影响太大，数据抖动大，不是很推荐使用。

 

 

四、性能优化不只仅是能够直接的提高用户体验，对参与其中的前端同窗而言，也是快速熟悉业务的一种捷径。更进一步说，能够做为技术驱动业务的入口，由于优化重构的过程当中你更容易发现历史业务的不合理之处，从而推进业务方的改造，能够提高我的的技术影响力。

 

 

2、立规期

 

性能优化工做并不是一朝一夕的事，今天达成了目标，并不意味着明天躺着睡觉也能维持成果。相反，前端性能一般呈现出较高的反复性，这和新的业务需 求有着很是直接的关系，但更底层的缘由一般是咱们并未把性能优化的规范给肯定下来。2011年的下半年，咱们并未在具体性能优化技术点上投入更多的工做， 而是作了性能优化的“守道士”，不过这个“守”不是保守的“守”，而是以攻为守。

 

 

一方面咱们制定了针对性能优化前端代码规范，其中最重要的是对页面图片资源的管理规范，归入到SVN管理，提升新图片文件添加的成本。

 

另外一方面咱们创建了“性能联盟”：性能优化不只仅是前端同窗单方面就可以保证的，更须要产品经理、设计师、Java开发同窗的支持和配合。在这一点上咱们作了不少工做，固然更多的是沟通和意识的影响，让你们造成一个共识： 性能是最重要的业务功能点！在平时的业务需求中，必定要从性能的角度考虑问题，有理有据的拒绝掉一些有损于前端性能的业务需求。

 

 

通过你们的努力，在这个阶段，搜索页面的性能一直维持在７秒钟左右，长达半年的时间。

 

立规期优化经验所得：

一、攻城难，守城更难。制订优化规范，并严格执行，是优化成果得以长期保持的必要保障。

二、性能优化不是前端同窗本身的事情，须要业务各合做方的共同认同和支持。性能是最重要的业务功能点！

三、前端同窗要加强本身的技术判断力，正确评估业务需求对性能的影响。同时要提高自身的沟通和影响力。

3、创新期

进入到2012年，随着咱们对搜索业务理解的逐步深刻，咱们已不知足于在原有前端框架上的修修补补，而是有了更多的自信去完全重写整个搜索前端应用框架。这也使得性能优化工做进入到一个新的阶段。

在这个阶段，咱们努力的核心目标是：从应用框架和工具的层面作性能优化，让性能优化成为一件低成本的事，真正的作到 fast by default！

在搜索应用框架 jEngine的构建 过程当中，咱们将一年多的前端优化实践思路融合在其中，实现了对性能优化友好的模块注册机制、BigRender优化模式、<script>标 签无阻塞加载等利用框架便可低成本实现优化的模式的支持。同时jEngine应用框架在模块化、前端异常监控方面也有着本身独特的实现，感兴趣的同窗能够 研究下。

 

简单介绍下对性能友好的模块注册机制的实现：jEngine的模块管理引入了“懒注册”的机制，全部的页面模块被分为如下三种模块：

一个模块的是首屏加载仍是延迟加载，和它自己的类实现没有关系，只和模块的注册方式有关系。

若是他出如今首屏，就使用正常的模块注册方式：AppCore.register(“sw_mod_sn”, Searchweb.Business.Category);

若是非首屏模块，须要页面滚动加载，或是鼠标事件触发加载，那么它的注册方式只需改为这样：

 

经过这种的方式，能够低成本的改变页面初始化过程当中对页面各模块的加载方式，从而减小首屏加载的文件个数和JS执行时间。

 

最后这个阶段，咱们不只造成了对性能友好的前端应用框架jEngine，还彻底重写了搜索各业务模块代码，完成了从YUI到jQuery基础框架的升级，最终把页面加载时间长期稳定在4秒左右。

 

创新期优化经验所得：

一、从架构、框架上发力可以下降性能优化的后期维护成本。

二、技术思路上的创新是性能优化持续进行的源动力。

三、性能优化工做是提高前端同窗技术能力水平的一个很好的切入点。

 

性能优化领域一个是值得前端同窗深刻研究的领域，网站性能直接影响到用户体验和各项业务指标。随着移动互联网的快速发展，这个领域的研究热点也有向移动性能优化转向的趋势，相信从此会有更多更精彩的技术出现。

 

转载地址：http://www.aliued.cn/2013/01/20/web%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E8%BF%9B%E9%98%B6%E8%B7%AF.html