性能优化

        在系统开发中,性能优化占开发周期很大一部分比重,它在不改变原有系统功能的前提下,提高系统的执行速度,系统运行更加稳定;系统优化,要根据实际情况分析系统运行缓慢的原因是因为前台还是后台,确定自己的主攻方向。

【第一步分析】

       在代码调试过程中firebug给我们提供了极大的便利,我们要积极利用身边的工具,作出科学的分析,如下图:

  

                                                                                                                                  图   1.1  性能分析        

可以分析出:

         1)整个页面加载所需要的时间占总时间的15%左右,系能优化则主要集中在前台当中。

         2)样式加载与报错.woff之间存在时间间隙

         3)有一个调用后台的请求在所有请求的最后。

【前台系统优化学习内容】


                                 

                                                                            图2.1  优化内容

        由上图,减少HTTP请求能很大一部分降低反应时间,图1.1一个页面加载调用了22个请求,相对页面元素内容显示的又比较少,是不正常的,减少HTTP请求的方法有很多种,其中比较经典的是图片地图和解决easy-ui错误使用的问题;

       页面的美观和效果,以及与后台数据交互,都要用到js和css样式表,css和js的大小,摆放位置,是否重复等都会直接影响到页面加载速度。

       缓存是所有网站开发都要用到的技术,按照发布文件的使用频率,设置缓存保存的时间,可以提高系统速度的同时也不至于让用户保存太多的缓存。

【具体介绍与实践】

       当一个网页图片较多时,每一张图片都添加一个url链接,这样造成http请求增多,使用图片地图,多张图片共用一个url链接,传递用户单击的x,y坐标以减少请求。

       easy-ui的正确引用:在本次项目开发过程中前台使用大量的easy-ui的内容,但由于easy-ui声明了class变量,导致url重复解析,请求增多:


        删除掉html中的class声明,就可以解决问题:


   

       如果同一个请求任然存在多次,则需要在html代码中搜索重复url引用,去除掉即可。

       设置Expires头,延长缓存时间,也可以提高优化的效果,在IIS发布的网站上双击HTTP相应表头-->添加常用表头,设置web内容过期时间,即可达到延长缓存时间的目的。

                                         

      浏览器通过Expires头信息展示过期时间(如下js的服务请求为灰色,即为调用的缓存信息):

                       

       js和样式表的引用:引用会添加HTTP请求,页面的显示分为加载和下载,如图1.1 响应时间:938ms(onload 886ms),938ms指从第一个请求开始到最后一个请求结束所花费的时间,886ms则是页面加载所需要的时间。加载包括样式和html的加载,但一些涉及功能的js则不需要立即加载,而且还有可能发生js阻塞(js加载与以下加载文件之间存在时间间隙),所以正确的引用方式是将css引用放到html头部,js则放到尾部。

【总结】

       系统性能优化涉及的方面很多,只有在不断发现问题的基础上,采用合理的分析工具进行分析,最后才是寻找解决问题的方法,优化任在进行中。。。


            

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 43
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 43
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值