web前端性能优化进阶路
作者:网络转载 发布时间:[ 2013/2/25 11:10:09 ] 推荐标签:
一方面我们制定了针对性能优化前端代码规范,其中重要的是对页面图片资源的管理规范,纳入到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、性能优化工作是提升前端同学技术能力水平的一个很好的切入点。
性能优化领域一个是值得前端同学深入研究的领域,网站性能直接影响到用户体验和各项业务指标。随着移动互联网的快速发展,这个领域的研究热点也有向移动性能优化转向的趋势,相信今后会有更多更精彩的技术出现。
相关推荐
更新发布
功能测试和接口测试的区别
2023/3/23 14:23:39如何写好测试用例文档
2023/3/22 16:17:39常用的选择回归测试的方式有哪些?
2022/6/14 16:14:27测试流程中需要重点把关几个过程?
2021/10/18 15:37:44性能测试的七种方法
2021/9/17 15:19:29全链路压测优化思路
2021/9/14 15:42:25性能测试流程浅谈
2021/5/28 17:25:47常见的APP性能测试指标
2021/5/8 17:01:11