Fiddler弱网测试uni-app

本文仅代表个人意见，仅供参考

ABC小程序与uni-app小程序弱网测试报告

本文在弱网环境下，在页面请求完成耗时和页面加载完成耗时这两个维度，对现有ABC小程序（后面统一称ABC小程序）和uni-app改造后的ABC小程序（后面统一称uniapp小程序）做一些比较。

一、什么是弱网？

很多时候我们在地铁或者在电梯上浏览网页时，网页一直在转圈或者提示加载错误，这样的网络环境就可以称为弱网环境。按照移动的特性来说，一般应用低于2G速率的都属于弱网，也可以将3G划分为弱网。以下是常见的网络制式的上行、下行速度表：

根据以上速度表，我们会在弱2G和弱3G这个范围内用 10kb/s、100kb/s、300kb/s这三个速度做一下对比观察，并且每个速度下分别做2次测试。

二、测试工具Fiddler

因为ABC小程序里面嵌套了h5页面，微信开发者工具不能抓取到h5里面的请求，所以我们使用Fiddler抓包工具进行测试。Fiddler抓包不仅可以抓取h5里面的请求，同时可以对当前网络环境的速度进行限制，也就是提供了更精准的弱网测试环境。

以下是对Fiddler的一些参数说明：

1、弱网开关

勾选Simulate Modem Speeds即为开启弱网模式，Disable Cashing为禁用缓存

2、弱网参数设置

菜单Rules—>Cutomize Rules

上行（上传）默认是300毫秒，也就是上传1KB需要300毫秒，也即1Kb/0.3s = 3.3KB/s

下行（下载）默认是150毫秒，也即是下载1KB需要150毫秒，也即1Kb/0.15s = 6.6KB/s

上传速度不在这次测试范围，设置和下载速度一样

换算一下：

①要达到10kb/s，1Kb/0.1s= 10kb/s，需要设置下载1KB需要100毫秒

②要达到100kb/s，1Kb/0.01s≈ 100kb/s，需要设置下载1KB需要10毫秒

③要达到300kb/s，1Kb/0.0033s ≈ 300kb/s，需要设置下载1KB需要3.3毫秒

三、页面请求完成耗时数据统计

在Statistics面板下有几个数据需要关注，当页面所有请求完成后，按shift选中页面中所有的请求，最后的响应时间减去请求开始时间即为整个页面请求的时间，这个时间就是参考的对比时间，也就是Sequence(clock) duration代表的时间。

四、页面加载完成耗时数据统计

根据微信小程序官方文档对页面生命周期的介绍

https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

（1）onLoad：首次进入页面加载时触发

（2）onShow：加载完成后、后台切到前台或重新进入页面时触发

（3）onReady：页面首次渲染完成时触发

（4）onHide：从前台切到后台或进入其他页面触发

（5）onUnload：页面卸载时触发

①从首次进入页面onLoad到页面首次渲染完成onReady这一持续时间，可以作为判断页面加载渲染快慢的一个测试数据。

onReady - onLoad = 页面渲染完成的持续时间（从进入页面到页面渲染完成之间的时间）

②因为ABC小程序内嵌了h5页面，和uni-app原生页面存在差异，所以ABC小程序h5页面加载的成功的时间也需要做一下统计，在官网文档中提供了bindload回调方法。

https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

onLoad - bindload = webview加载时间（从进入页面到webview加载成功之间的时间）   

五、对比步骤

①以政策大厅以及政策详情这两个页面作为测试页面

②进入小程序首页

③清空所有页面缓存，network设置Disable cache禁用缓存

④刷新首页

⑤打开Fiddler弱网开关并设置禁用缓存

⑥点击政策大厅，再点击政策详情。

⑦观测页面并记录数据

⑧完成测试

六、测试数据对比

次数：每个网络环境，每个项目分别测试2次

环境：uat内网环境

缓存：禁用缓存

(一)政策大厅页测试数据（单位：秒）

网络	项目/次数	页面加载 完成时间	Webview加载 完成时间	请求响应 总时间
10kb/s	ABC小程序第1次	1.11	2.44	114
	ABC小程序第2次	1.21	3.57	116
	uni小程序第1次	0.31	无	31.25
	uni小程序第2次	0.24	无	31.05
100kb/s	ABC小程序第1次	0.55	1.79	30.8
	ABC小程序第2次	1.15	2.0	31.24
	uni小程序第1次	0.28	无	8.11
	uni小程序第2次	0.26	无	8.17
300kb/s	ABC小程序第1次	0.52	1.71	30.55
	ABC小程序第2次	1.24	2.17	31.12
	uni小程序第1次	0.33	无	7.87
	uni小程序第2次	0.34	无	7.92
不限速	ABC小程序	0.65	1.92	4.23
	Uni小程序	0.32	无	1.47

(二)政策详情页测试数据（单位：秒）

网络	项目/次数	页面加载 完成时间	Webview加载 完成时间	请求响应 总时间
10kb/s	ABC小程序第1次	2.54	4.36	142
	ABC小程序第2次	1.52	2.88	160
	uni小程序第1次	0.76	无	51.82
	uni小程序第2次	0.39	无	51.42
100kb/s	ABC小程序第1次	1.08	1.91	44.62
	ABC小程序第2次	1.09	1.94	43.15
	uni小程序第1次	0.44	无	15.31
	uni小程序第2次	0.40	无	15.12
300kb/s	ABC小程序第1次	1.07	1.86	43.08
	ABC小程序第2次	1.38	2.20	43.12
	uni小程序第1次	0.44	无	15.63
	uni小程序第2次	1.85	无	15.20
不限速	ABC小程序	1.20	2.01	4.56
	Uni小程序	0.42	无	3.61

七、结论

（一）ABC小程序嵌套h5的模式，在遇到一些大文件下载时，会造成页面阻塞，只有等待资源加载完毕后页面才展示，有一个长时间的白屏等待过程。

（二）uni-app改造后的小程序，在页面加载速度和接口响应速度方面，对比嵌套h5有比较大的提升。

（三）字体文件对h5页面加载速度和页面请求速度有比较大的影响，后续需要优化字体文件的加载。