H5前端性能测试总结

测试关注指标

  1. Http请求个数

    • 同一个域名不同浏览器内核、不同版本浏览器,大部分并发请求数是6个;
    • 优化方案:

      a.雪碧图:即CSS Sprite,也称CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分。

      b.图片地图:是一种小图合并大图的范式,和雪碧图相似,区别仅在实现原理上有不同,雪碧图仅仅是通过CSS的方式来呈现图片的某个局部,而图片地图是从html代码的方式来控制显示区域。

      c.JS&CSS合并:将多个小的js、CSS合并成一个大的js、CSS文件,间接达到减少http请求的目的。

  2. 组件是否压缩

    • 压缩方法:在http请求中设置所接受到压缩方式,在Server端对Response资源进行压缩再传给浏览器。一般使用GZIP设置content-Encoding字段

    • 压缩对象:图片音乐不需要再压缩;Js,CSS通过去掉空格和回车来压缩,再经过GZIP压缩;

  3. 图片格式和大小是否合适

    • 图片格式:JPG性价比最高;

    • 图片尺寸:常用规格为480×800、600×1024、720×1280,800×1280等,获取原图而不是通过代码对图片放大或缩小;

    • 图片压缩:压缩工具如TinyPNG, Smush.it可以得到更好的压缩且图片质量不变;

  4. CSS放在顶部

    • CSS要放到html代码的开头的head标签结束前,放底部可能会引起“闪屏”的不好体验;
  5. JS放在底部

    • 下载js时,并行下载机制失效,渲染引擎会等待js下载完成再开始渲染,最后加载js减少页面加载时间;
  6. JS &CSS压缩

    • 压缩方法,比如:

      //CC的压缩示例代码
      
      function echo(stringA,stringB){
      
           var hello = "你好";
      
           alert("hello world");
      }

      第一步:“精简”,去掉js中的空格,换行符和注释等信息,使得js代码变得紧凑而不失其语义。如:

      function echo(stringA,stringB){var hello="你好";alert("hello world")};

      第二步:”混淆”,将方法名和变量名用更简短的方式来表达,如变量可以用一个字符来表示。如:

      function echo(c,b){var a="你好",alert("hello world")};

      最后,经过压缩过的脚本文件使用务器端设置GZIP压缩算来压缩;

  7. 是否添加缓存

    • 通过HTTP的META设置expires和cache-control;
  8. 避免非200返回值

    • 如果有http请求返回为非200的状态码,我们认为这一次请求是无意义的,占用了稀缺的网络资源,所应该避免非200的返回状态码;
  9. 使用CDN

    • 时间相关:首屏时间,首资源下载时间,总资源下载时间,用户可操作时间;
    • WebView相关: 内存:加载页面前后内存变化,可间接反映H5中资源数量和大小,如dom数量,图片大小;

      CPU:当页面中资源样式复杂,强调视觉效果时,可观察CPU占用率来反映H5绘制质量。如果CPU长期处于高占用率,可考虑降低高计算量的视觉效果等手段;

      FPS:帧率尤其在有视频和动画效果的H5中,应该重点关注,防止严重的卡顿流出。

推荐工具

Chrome DevTools

上一篇:oracle user locked(timed)处理


下一篇:345 Reverse Vowels of a String 反转字符串中的元音字母