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中,应该重点关注,防止严重的卡顿流出。
推荐工具
Chrome DevTools
H5前端性能测试总结的更多相关文章
- 移动H5前端性能优化指南
移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...
- 移动H5前端性能优化指南(转载)
移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...
- [推荐]移动H5前端性能优化指南
[推荐]移动H5前端性能优化指南 http://isux.tencent.com/h5-performance.html
- 移动H5前端性能优化指南[转]
移动H5前端性能优化指南 米随随2015.01.23 移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首 ...
- 第146天:移动H5前端性能优化
移动H5前端性能优化 一.概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点,首屏加载3秒完成或使用Loading 4. 基于联通 ...
- [转]移动H5前端性能优化指南
移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...
- 移动H5前端性能优化指南[托尼托尼研究所]
概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2. ...
- 移动端H5前端性能优化指南:
分享地址:https://isux.tencent.com/h5-performance.html
- 移动 H5(PC Web)前端性能优化指南
原文地址https://zhuanlan.zhihu.com/p/25176904?utm_source=wechat_session&utm_medium=social&utm_me ...
随机推荐
- 微信小程序去除button按钮的边框
小程序开发记录 小程序开发中, 有时候我们希望button不要有边框, 需要使用button::after来实现, 具体如下: .operations button::after{border:0 n ...
- Sqoop2安装记录
我是採用的源代码编译的包安装的, 主要是考虑到会对部分功能做裁剪或增强, 详细源代码编译方式能够參考另外一篇博文<编译Sqoop2错误解决>.然后从dist/target文件夹下拷贝sqo ...
- Python 练习冊,每天一个小程序
Python 练习冊,每天一个小程序 说明: Github 原文地址: 点击打开链接 Python 练习冊.每天一个小程序.注:将 Python 换成其它语言,大多数题目也试用 不会出现诸如「 ...
- poj 1860 Currency Exchange (SPFA、正权回路 bellman-ford)
链接:poj 1860 题意:给定n中货币.以及它们之间的税率.A货币转化为B货币的公式为 B=(V-Cab)*Rab,当中V为A的货币量, 求货币S通过若干此转换,再转换为原本的货币时是否会添加 分 ...
- USACO Section 2.1 Healthy Holsteins
/* ID: lucien23 PROG: holstein LANG: C++ */ #include <iostream> #include <fstream> #incl ...
- chrome解决http自动跳转https问题
1.地址栏输入: chrome://net-internals/#hsts 2.找到底部Delete domain security policies一栏,输入想处理的域名,点击delete. 3.搞 ...
- 【Sqlsever系列】日期和时间
1 概述 本文将集合MSDN简要概述Sqlserver中日期和时间函数. 2 具体内容 2.1 date and time data types 2.2 日期和时间功能 3 参考文献 ...
- 自学WPF之Binding(二)
没有Source的Binding,使用ContentText作为Binding源: 上一篇是把CLR类型对象当作指定为Binding的Source,两种方法:一是把对象赋值给Binding.Sourc ...
- IntelliJ IDEA 设置Output (输出窗口)窗口字体大小
Settings-->Editor-->Colors&Fonts-->Console Font 如图: 字体调好了以后使用起来眼睛就轻松多了
- 54、js初识
今天这篇将介绍javascript,学完javascript就可以使你的网页动起来. 一.JavaScript概述 1.JavaScript的历史 1992年Nombas开发出C-minus-min ...