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中，应该重点关注，防止严重的卡顿流出。

H5前端性能测试总结相关推荐

移动H5前端性能优化指南[转]
移动H5前端性能优化指南米随随2015.01.23 移动H5前端性能优化指南概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点 ...
H5前端性能测试点及优化方法
1.背景随着H5的普及和运用,它深深影响着我们各个业务的发展和用户体验,影响H5性能因素有多种:网络带宽.DNS解析时间.服务器处理能力.服务器和客户端的软硬件配置.网页内容.数据库操作.引用其他网 ...
移动H5前端性能优化指南（转自ISUX）
昨天在ISUX上面看到这篇文章,觉得对于一个已经有一点前端基础的程序猿来说,的确是需要一点总结了,感觉这里讲的还不错,可以作为速查,于是收录来自己的博客, 在此感谢ISUX大神.原文地址:http:/ ...
H5前端性能测试快速入门
说到H5测试,对于做WEB测试的同学来说再熟悉不过了,它包括页H5功能测试,前端性能测试,浏览器兼容性能测试,以及服务端性能测试.那本文谈到的则是H5前端性能测试,并希望通过阅读本文后,能够知道:H5 ...
移动HTML5前端性能优化指南
http://www.cocoachina.com/webapp/20150126/11020.html (点击看大图) 移动H5前端性能优化指南[托尼托尼研究所] 概述 1. PC优化手段在M ...
WEB前端性能优化基本套路
前言前端性能优化这是一个老生常谈的话题,但是还是有很多人没有真正的重视起来,或者说还没有产生这种意识. 当用户打开页面,首屏加载速度越慢,流失用户的概率就越大,在体验产品的时候性能和交互对用户的影响 ...
nginx 开启gzip 配置js_前端性能优化之缓存与GZIP
最近疫情,着实无聊.简单总结点东西,打发时间. 这篇文章主要记录如何在tomcat或nginx中配置前端静态资源的缓存策略,力求简洁明了,不参杂其他无关配置项. 压缩对于HTTP的压缩,是一种使用C ...
性能测试总结(三)--工具选型篇
性能测试总结(三)--工具选型篇本篇文章主要简单总结下性能测试工具的原理以及如何选型.性能测试和功能测试不同,性能测试的执行是基本功能的重复和并发,需要模拟多用户,在性能测试执行时需要监控指标参数, ...
CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

H5前端性能测试总结

测试关注指标

推荐工具

H5前端性能测试总结相关推荐

最新文章

热门文章