移动web性能测试笔记之一

Posted 2021-04-30 TesterClub

收集整理 @2017/12/16

打开一个页面的过程

从用户在app点击一个控件，到用户最终看到页面，在页面上可以进行各种操作，简单分为一下几个过程
1、用户点击app webview控件发出请求。（主要是网络耗时）
2、web服务器接到请求，处理请求，（主要是web服务器耗时）
3、web服务器返回数据，app webview开始接受数据（主要是网络耗时）
4、webview边接受数据边加载页面中的脚本（下载js脚本等耗时）
5、webview下载页面中的样式、图片、视频等资源（下载图片等耗时）

从上图可以看出，从点击控件到页面显示完成，有4个时间节点需要关注，一是白屏时间，二是首屏时间，三是页面加载完成时间，四是资源加载完成时间。

白屏时间就是从点击控件到出现该页面的第一个元素的时间，出现了该页面的第一个元素，意味着屏幕已经不属于白屏阶段了，虽然此时页面未完全显示，屏幕上也看不到完整信息，甚至是屏幕看起来还是白的。影响白屏时间长度的因素有2个，一是app对控件 click事件的响应，此时手机硬件性能比如cpu使用率、可用内存等是关键，当然，app上对click时间的响应逻辑代码也是一个关键，过于复杂的逻辑都会消耗过程的cpu处理时长，从而影响app对click事件的响应，二是网络环境，app响应完click事件后，就进入网络通信阶段，此时从app端sent完请求到接收到server端返回的数据，app接收到第一个字节数据并解析出来显示到屏幕上为止，这个过程中几乎都是消耗在网络通信上，比如建立网络链接、查找dns等。从app接收到第一个字节并解析显示到屏幕上为止，已经走完了理论上的白屏时间阶段，从感官上看此时屏幕可能还是白屏的。减少白屏时间的对策一是建设click事件响应的逻辑复杂度，二是优化网络环境，提高dns响应速度，加快server接口响应速度。还可能涉及到native与H5之间的交互效率等因素。

首屏时间就是从收到server返回的第一个字节数据到执行完dom中head部分的代码，完成html解析，此时看到的屏幕有内容，但可能页面样式很丑，完全是变形的，影响此段时间的因素主要是html代码的复杂度和手机硬件性能。

页面加载完成时间就是从接收到第一个字节开始到页面的css、js等加载完成，web页面是边接收边解析渲染的，所以这个时间段是包含首屏时间的，这个阶段未完成时会出现页面看起来显示完成了，但点击页面上的控件不会有反应的情况。此时页面图片显示还是空白，因为图片等资源加载的优先级低于js、css等。影响这个阶段时间长度的因素还是js、css代码复杂度，是否进行了压缩等相关，当然，此阶段还在持续接收server返回的数据，因此网络因素也一直是关键。

资源加载完成时间主要是指页面完成显示后到图片等资源文件接收显示完成为止，这段时间主要是下载页面图片、广告、视频等资源文件，因此，网络因素、图片资源文件的大小等是主要影响因素。优化对策主要是优化网络环境、图片是否进行过压缩、高清图片是否是必须，是否可以使用本地缓存等。

以上4个阶段构成了整页的响应时间，其中严重影响用户体验的就是白屏时间、页面加载完成时间，优化关键是提高网络响应速度、优化server接口响应速度、降低js、css代码复杂度、优化页面结构减少过度绘制、进行js压缩、减少图片大小、以及合理的使用缓存方案。

欢迎投稿：[e-mail]