H5前端性能测试小结

Http请求个数

同一个域名不同浏览器内核、不同版本浏览器，大部分并发请求数是6个；

优化方案：

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

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

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

组件是否压缩

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

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

图片格式和大小是否合适

图片格式：JPG性价比最高；

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

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

CSS放在顶部

CSS要放到html代码的开头的head标签结束前，放底部可能会引起“闪屏”的不好体验；

JS放在底部

下载js时，并行下载机制失效，渲染引擎会等待js下载完成再开始渲染，最后加载js减少页面加载时间；

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压缩算来压缩；

是否添加缓存

通过HTTP的META设置expires和cache-control;

避免非200返回值

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

使用CDN

时间相关：首屏时间，首资源下载时间，总资源下载时间，用户可操作时间；

WebView相关： 内存：加载页面前后内存变化，可间接反映H5中资源数量和大小，如dom数量，图片大小;

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

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