web前端性能优化进阶路

标签: 前端开发 | 发表时间:2013-01-20 15:17 | 作者:王涛
分享到:
出处:http://www.aliued.cn

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

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

一:初探期 

2010年底我们开始接手搜索List页面,这是中文站历史最为悠久的页面之一,当时它的生命体征正如它的年龄一样,非常虚弱:当时的基调网络监控显示,页面的完全加载的时间是 16秒!作为以“快”为核心业务指标的搜索页面,这个状态显然已是无法承担重任了。

性能是一定要优化的,但我们也面临着大多数前端同学所面临的共性问题 — 业务需求紧张,况且我们是刚刚接手这个业务,非常不熟悉,别说是优化了,就是做个小需求也都经常出现线上故障。就是在这样的情况下,我们开始了搜索页面的性能优化之路,并且给自己定下了当时看起来非常难以实现的目标:在2011年年中前把全页面加载时间降低到 7秒以下。

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

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

  • 小图片的合并,形成CSS Sprite,并优化图片
  • 模块的异步加载
  • 图片的懒加载
  • CSS文件引用放在页面顶部,JS文件引用放在页面底部,并对代码压缩
  • 缩小cookie体积
前人的技术理论果然是靠谱,经过我们半年时间加班加点的性能优化后,我们奇迹般的达成了优化目标!(附性能曲线图)

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

 

初探期优化经验所得:

1、优化前,广泛地获取该领域的各种优化思路。有条件的同学可以参加下WPO领域的一些会议,比较推荐 Velocity性能优化大会。

 

2、   成立性能优化组织,明确性能优化目标。
 这一点非常重要:可量化的目标以及可持续跟踪的优化数据是性能优化工作得以持续进行的保障,同时也是源动力!大家能持续这么长时间迭代的进行优化工作,正是因为每个阶段我们都有相应的性能优化目标作为指引,并有志同道合的同学一起努力。

 

3、持续追踪性能数据,要选择合适的页面性能测量工具,一旦选定后,不再更换,以保证历史数据的可参照性。
我们一直在使用 基调网络,不得不说还是非常专业的,不过是收费工具。 给自家的测试工具也打个广告吧,免费的测量工具– 阿里测。国外的测量工具也挺多的,不过受网络因素影响太大,数据抖动大,不是很推荐使用。

 

4、性能优化不仅仅是可以直接的提升用户体验,对参与其中的前端同学而言,也是快速熟悉业务的一种捷径。更进一步说,可以作为技术驱动业务的入口,因为优化重构的过程中你更容易发现历史业务的不合理之处,从而推动业务方的改造,可以提升个人的技术影响力。

 

二、立规期

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

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

另一方面我们建立了“性能联盟”:性能优化不仅仅是前端同学单方面就能够保证的,更需要产品经理、设计师、Java开发同学的支持和配合。在这一点上我们做了很多工作,当然更多的是沟通和意识的影响,让大家形成一个共识: 性能是最重要的业务功能点!在平时的业务需求中,一定要从性能的角度考虑问题,有理有据的拒绝掉一些有损于前端性能的业务需求。

经过大家的努力,在这个阶段,搜索页面的性能一直维持在7秒钟左右,长达半年的时间。

立规期优化经验所得:

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

2、性能优化不是前端同学自己的事情,需要业务各合作方的共同认同和支持。性能是最重要的业务功能点!

3、前端同学要增强自己的技术判断力,正确评估业务需求对性能的影响。同时要提升自身的沟通和影响力。

三、创新期

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

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

在搜索应用框架 jEngine的构建过程中,我们将一年多的前端优化实践思路融合在其中,实现了对性能优化友好的模块注册机制、BigRender优化模式、<script>标签无阻塞加载等利用框架即可低成本实现优化的模式的支持。同时jEngine应用框架在模块化、前端异常监控方面也有着自己独特的实现,感兴趣的同学可以研究下。
简单介绍下对性能友好的模块注册机制的实现:jEngine的模块管理引入了“懒注册”的机制,所有的页面模块被分为以下三种模块:
一个模块的是首屏加载还是延迟加载,和它本身的类实现没有关系,只和模块的注册方式有关系。
如果他出现在首屏,就使用正常的模块注册方式:AppCore.register(“sw_mod_sn”, Searchweb.Business.Category);
如果非首屏模块,需要页面滚动加载,或是鼠标事件触发加载,那么它的注册方式只需改成这样:
通过这种的方式,可以低成本的改变页面初始化过程中对页面各模块的加载方式,从而减少首屏加载的文件个数和JS执行时间。
最后这个阶段,我们不仅形成了对性能友好的前端应用框架jEngine,还完全重写了搜索各业务模块代码,完成了从YUI到jQuery基础框架的升级,最终把页面加载时间长期稳定在4秒左右。

创新期优化经验所得:

1、从架构、框架上发力能够降低性能优化的后期维护成本。

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

3、性能优化工作是提升前端同学技术能力水平的一个很好的切入点。

 

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

 

 

相关 [web 前端 性能] 推荐:

web前端性能优化进阶路

- - 阿里巴巴(中国站)用户体验设计部博客
Web前端性能优化WPO,相信大多数前端同学都不会陌生,在各自所负责的站点页面中,也都会或多或少的有过一定的技术实践. 可以说,这个领域并不缺乏成熟技术理论和技术牛人:例如Yahoo的web站点性能优化 黄金法则,以及大名鼎鼎的优化大师 Steve Souders. 本文并非一篇讨论性能优化技术方法的文章,而更多的是对中文站 搜索List页面持续两年多的前端性能优化实践的 思路总结.

Web前端优化

- - JavaScript - Web前端 - ITeye博客
优点:直接使用浏览器内存的缓存数据,减少网站后台压力,用户体验(速度)好. 缺点:对于时时变化的动态页面,这种情况就不能容忍了,因为每次访问的都是第一次访问的内容,这样即使所请求的页面已经变化了,用户也不可能知道,所以此场景必须要消除这种缓存的影响. 延迟加载,将资源延迟到需要的时候的加载,例如detail页面,相关产品推荐,当用户浏览更多的信息往下拉动滚动时,才进行加载,异步加载可以大幅减少对后端资源的使用,在需要的时候加载,是资源合理使用常用的方式,但是也带来一个问题,当往下拉才去加载,如果性能不够好,用户的体验其实是不好的,“菊花”转动的时间会比较长,同时异步加载对前端性能的作用也是非常明显的,渲染的节点数量大幅减少.

Web 前端测试

- - Web前端 - ITeye博客
Web 网站测试流程和方法(转载). 进行正式测试之前,应先确定如何开展测试,不可盲目的测试. 一般网站的测试,应按以下流程来进行:. 1)使用HTML Link Validator将网站中的错误链接找出来;. 2)测试的顺序为:自顶向下、从左到右;. 3)查看页面title是否正确. (不只首页,所有页面都要查看);.

Web 前端攻防(2014版)

- - 博客 - 伯乐在线
外链会产生站外请求,因此可以被利用实施 CSRF 攻击. 目前国内有大量路由器存在 CSRF 漏洞,其中相当部分用户使用默认的管理账号. 通过外链图片,即可发起对路由器 DNS 配置的修改,这将成为国内互联网最大的安全隐患. 百度旅游在富文本过滤时,未考虑标签的 style 属性,导致允许用户自定义的 CSS.

Web性能优化

- - SegmentFault 最新的文章
Web网站的性能细线在几个方面:. 通过分析浏览器的渲染原理、资源对渲染的影响,得出优化网站性能的办法. Chrome的 Timeline面板录制网页加载的过程,分析记录浏览器渲染过程中每个过程的耗时. 关闭Chrome扩展或者启用隐身模式. 根据使用场景,模拟真实的网络加载情况:. 2.2 Timeline工具的各个组成.

web性能测试指标

- - 研发管理 - ITeye博客
Web性能测试的部分概况一般来说,一个Web请求的处理包括以下步骤:. (2)web server接受到请求,进行处理;. (3)web server向DB获取数据;. (4)webserver生成用户的object(页面),返回给用户. 给客户发送请求开始到最后一个字节的时间称为响应时间(第三步不包括在每次请求处理中).

Web性能优化:prefetch, prerender

- - Harttle Land
本文从预加载的角度介绍如何优化页面载入和渲染的性能,在展开内容之前先了解一下浏览器显示页面的过程: 首先是DNS解析,然后建立TCP连接,接着下载HTML内容以及资源文件,最后才是整个页面的渲染. 图片来源: https://docs.google.com/presentation/d/18zlAdKAxnc51y_kj-6sWLmnjl6TLnaru_WH0LJTjP-o/present?slide=id.gc03305a_0106.

Web前端优化最佳实践

- Jimmy - 中文热文榜|最新
还有 Jason, Bixuan, 曦, 推荐,查看全部 8 个推荐. 博评 - Sting的网经发表于2010-08-08 08:41:10. Google的前端优化最佳实践 Yahoo的前端优化最佳实践. Web前端优化最佳实践之Content篇. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests).

Web前端浏览器兼容初探

- - 博客 - 伯乐在线
浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端:. 1 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后端一起搞的同学,小生2年前就这种状态,鼓励人家用ie6.. 2 我要遵循标准,我只要ff就好,IE就是坑爹的玩意,我不必去理他(小生一年前的心态.

web前端面试笔试题+优化

- - JavaScript - Web前端 - ITeye博客
前端是庞大的,包括HTML、CSS、Javascript、Image、Flash等等各种各样的资源. 前端优化是复杂的,针对方方面面的资源都有不同的方式. 那么,前端优化的目的是什么. 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验. 从服务商角度而言,优化能够减少页面请求数、或者减小请求所占带宽,能够节省可观的资源.