/ QA

性能优化: web前端性能优化概述 by罗少木

本文作者:罗少木

测试技术:测试开发工程师

编者:AT

备注:原文排版略作调整,文字与层级关系无改动。

正文开始====

前端性能优化方式分:页面级、代码级

1、页面级性能优化的考虑点:
  首先、考虑页面数据的来源,是否有来源第三方资源造成性能问题。
  其次、定位是由于第三方资源还是本地资源导致性能问题。
  最后、可以以下几种方式进行前端性能优化。
  1、减少http请求数。
    这是众多前端性能优化比较常用的方式之一,解决方案如下所示:
    1、简化页面:从设计实现层面简化页面。
      如百度页面简洁,减少资源的使用是最直接的。
    2、缓存技术:缓存越多内容到客户端越好。主要有以下方式。
      1、将很少更新的内容缓存到客户端,
        然后设置Expires超时时间越长越好。
      2、如果有部分内容有可能会被更新,
        服务器端采用Last_Modified属性来标记该内容最新一次修改时间。
        下次访问时客户端请求会自动发送If-Modified-Since属性值再次与服务器端的Last_Modified进行匹配。
        不一样需要重新发送资源到客户端。
        如果开发只设置了缓存技术且Expires时间过长,会导致用户无法看到最新的页面。
      3、多个js文件、CSS文件资源合并与图片进行压缩
      4、采用CSS sprite技术。
        针对图片进行合并,减少每张图片的http请求数及图片变小
      5、采用内联图片。
        将图片以base64编码方式嵌套于页面,减少http请求及图片大小,
        最大缺点就是浏览器无法缓存,加大网页体积
      6、lazyloadimage图片延迟加载,
        只显示当前页面图片,往下滚动时异步加载
  注:通过httpwatch、fiddler工具检查前端优化后的响应时间
  2、浏览器请求数上限限制。
    1、同一时间针对统一域名的请求是有限制的,需要进行分批次发请求。
    2、解决浏览器请求数上限的限制,可以采用分布式方式进行资源存放。
      比如图片,CSS,js等存放在某一域名的服务器上、静态页面存放于某一域名服务器下。
      此时浏览器可以对不同域名服务器同时并发请求,提高浏览器并发请求数,同时能够更快响应静态页面。
      当然不是越多域名越好,毕竟解析dns也是需要花费时间。
  3、CSS样式表置放于Body顶部
    (若样式表没有加载完成,可能造成页面不显示或网页内容重新显示)
  4、将外部脚本文件里放于底部
    (外部脚本文件会阻塞其他请求资源下载)
    注:如果网页采用Jquery技术,jquery技术引人document.ready事件,
    如果导致我们无法将所有的脚本文件引入放到 Body下方。
    但是我们的脚本如果都在document.ready之后执行,
    可以直接放到Body底部,等待网页加载完毕后,再加载js文件
2、代码级性能优化的考虑点(后续添加)