Fiddler弱网测试uni-app

╰半橙微兮° 2021-09-09 06:42 702阅读 0赞

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

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

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

**一、什么是弱网？**

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

![20210803120655349.png][]

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

**二、测试工具Fiddler**

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

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

1、弱网开关

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70][]

2、弱网参数设置

菜单Rules—>Cutomize Rules

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 1][]

上行（上传）默认是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毫秒

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 2][]

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 3][]

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

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

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][https_developers.weixin.qq.com_miniprogram_dev_component_web-view.html]

![20210803121034100.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 4][]

**五、对比步骤**

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

②进入小程序首页

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

④刷新首页

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

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

⑦观测页面并记录数据

⑧完成测试

**六、测试数据对比**

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

环境：uat内网环境

缓存：禁用缓存

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

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:49.4pt;"> 网络 </td> 
 <td style="vertical-align:top;width:99.2pt;"> 项目/次数 </td> 
 <td style="vertical-align:top;width:85.05pt;"> 页面加载 完成时间 </td> 
 <td style="vertical-align:top;width:92.15pt;"> Webview加载 完成时间 </td> 
 <td style="vertical-align:top;width:89pt;"> 请求响应 总时间 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:49.4pt;"> 10kb/s </td> 
 <td style="vertical-align:top;width:99.2pt;"> ABC小程序第1次 </td> 
 <td style="vertical-align:top;width:85.05pt;"> 1.11 </td> 
 <td style="vertical-align:top;width:92.15pt;"> 2.44 </td> 
 <td style="vertical-align:top;width:89pt;"> 114 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:99.2pt;"> ABC小程序第2次 </td> 
 <td style="vertical-align:top;width:85.05pt;"> 1.21 </td> 
 <td style="vertical-align:top;width:92.15pt;"> 3.57 </td> 
 <td style="vertical-align:top;width:89pt;"> 116 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:99.2pt;"> uni小程序第1次 </td> 
 <td style="vertical-align:top;width:85.05pt;"> 0.31 </td> 
 <td style="vertical-align:top;width:92.15pt;"> 无 </td> 
 <td style="vertical-align:top;width:89pt;"> 31.25 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:99.2pt;"> uni小程序第2次 </td> 
 <td style="vertical-align:top;width:85.05pt;"> 0.24 </td> 
 <td style="vertical-align:top;width:92.15pt;"> 无 </td> 
 <td style="vertical-align:top;width:89pt;"> 31.05 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:49.4pt;"> 100kb/s </td> 
 <td style="vertical-align:top;width:99.2pt;"> ABC小程序第1次 </td> 
 <td style="vertical-align:top;width:85.05pt;"> 0.55 </td> 
 <td style="vertical-align:top;width:92.15pt;"> 1.79 </td> 
 <td style="vertical-align:top;width:89pt;"> 30.8 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:99.2pt;"> ABC小程序第2次 </td> 
 <td style="vertical-align:top;width:85.05pt;"> 1.15 </td> 
 <td style="vertical-align:top;width:92.15pt;"> 2.0 </td> 
 <td style="vertical-align:top;width:89pt;"> 31.24 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:99.2pt;"> uni小程序第1次 </td> 
 <td style="vertical-align:top;width:85.05pt;"> 0.28 </td> 
 <td style="vertical-align:top;width:92.15pt;"> 无 </td> 
 <td style="vertical-align:top;width:89pt;"> 8.11 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:99.2pt;"> uni小程序第2次 </td> 
 <td style="vertical-align:top;width:85.05pt;"> 0.26 </td> 
 <td style="vertical-align:top;width:92.15pt;"> 无 </td> 
 <td style="vertical-align:top;width:89pt;"> 8.17 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:49.4pt;"> 300kb/s </td> 
 <td style="vertical-align:top;width:99.2pt;"> ABC小程序第1次 </td> 
 <td style="vertical-align:top;width:85.05pt;"> 0.52 </td> 
 <td style="vertical-align:top;width:92.15pt;"> 1.71 </td> 
 <td style="vertical-align:top;width:89pt;"> 30.55 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:99.2pt;"> ABC小程序第2次 </td> 
 <td style="vertical-align:top;width:85.05pt;"> 1.24 </td> 
 <td style="vertical-align:top;width:92.15pt;"> 2.17 </td> 
 <td style="vertical-align:top;width:89pt;"> 31.12 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:99.2pt;"> uni小程序第1次 </td> 
 <td style="vertical-align:top;width:85.05pt;"> 0.33 </td> 
 <td style="vertical-align:top;width:92.15pt;"> 无 </td> 
 <td style="vertical-align:top;width:89pt;"> 7.87 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:99.2pt;"> uni小程序第2次 </td> 
 <td style="vertical-align:top;width:85.05pt;"> 0.34 </td> 
 <td style="vertical-align:top;width:92.15pt;"> 无 </td> 
 <td style="vertical-align:top;width:89pt;"> 7.92 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:49.4pt;"> 不限速 </td> 
 <td style="vertical-align:top;width:99.2pt;"> ABC小程序 </td> 
 <td style="vertical-align:top;width:85.05pt;"> 0.65 </td> 
 <td style="vertical-align:top;width:92.15pt;"> 1.92 </td> 
 <td style="vertical-align:top;width:89pt;"> 4.23 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:99.2pt;"> Uni小程序 </td> 
 <td style="vertical-align:top;width:85.05pt;"> 0.32 </td> 
 <td style="vertical-align:top;width:92.15pt;"> 无 </td> 
 <td style="vertical-align:top;width:89pt;"> 1.47 </td> 
 </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:49.4pt;"> 网络 </td> 
 <td style="vertical-align:top;width:99.2pt;"> 项目/次数 </td> 
 <td style="vertical-align:top;width:85.05pt;"> 页面加载 完成时间 </td> 
 <td style="vertical-align:top;width:92.15pt;"> Webview加载 完成时间 </td> 
 <td style="vertical-align:top;width:89pt;"> 请求响应 总时间 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:49.4pt;"> 10kb/s </td> 
 <td style="vertical-align:top;width:99.2pt;"> ABC小程序第1次 </td> 
 <td style="vertical-align:top;width:85.05pt;"> 2.54 </td> 
 <td style="vertical-align:top;width:92.15pt;"> 4.36 </td> 
 <td style="vertical-align:top;width:89pt;"> 142 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:99.2pt;"> ABC小程序第2次 </td> 
 <td style="vertical-align:top;width:85.05pt;"> 1.52 </td> 
 <td style="vertical-align:top;width:92.15pt;"> 2.88 </td> 
 <td style="vertical-align:top;width:89pt;"> 160 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:99.2pt;"> uni小程序第1次 </td> 
 <td style="vertical-align:top;width:85.05pt;"> 0.76 </td> 
 <td style="vertical-align:top;width:92.15pt;"> 无 </td> 
 <td style="vertical-align:top;width:89pt;"> 51.82 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:99.2pt;"> uni小程序第2次 </td> 
 <td style="vertical-align:top;width:85.05pt;"> 0.39 </td> 
 <td style="vertical-align:top;width:92.15pt;"> 无 </td> 
 <td style="vertical-align:top;width:89pt;"> 51.42 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:49.4pt;"> 100kb/s </td> 
 <td style="vertical-align:top;width:99.2pt;"> ABC小程序第1次 </td> 
 <td style="vertical-align:top;width:85.05pt;"> 1.08 </td> 
 <td style="vertical-align:top;width:92.15pt;"> 1.91 </td> 
 <td style="vertical-align:top;width:89pt;"> 44.62 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:99.2pt;"> ABC小程序第2次 </td> 
 <td style="vertical-align:top;width:85.05pt;"> 1.09 </td> 
 <td style="vertical-align:top;width:92.15pt;"> 1.94 </td> 
 <td style="vertical-align:top;width:89pt;"> 43.15 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:99.2pt;"> uni小程序第1次 </td> 
 <td style="vertical-align:top;width:85.05pt;"> 0.44 </td> 
 <td style="vertical-align:top;width:92.15pt;"> 无 </td> 
 <td style="vertical-align:top;width:89pt;"> 15.31 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:99.2pt;"> uni小程序第2次 </td> 
 <td style="vertical-align:top;width:85.05pt;"> 0.40 </td> 
 <td style="vertical-align:top;width:92.15pt;"> 无 </td> 
 <td style="vertical-align:top;width:89pt;"> 15.12 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:49.4pt;"> 300kb/s </td> 
 <td style="vertical-align:top;width:99.2pt;"> ABC小程序第1次 </td> 
 <td style="vertical-align:top;width:85.05pt;"> 1.07 </td> 
 <td style="vertical-align:top;width:92.15pt;"> 1.86 </td> 
 <td style="vertical-align:top;width:89pt;"> 43.08 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:99.2pt;"> ABC小程序第2次 </td> 
 <td style="vertical-align:top;width:85.05pt;"> 1.38 </td> 
 <td style="vertical-align:top;width:92.15pt;"> 2.20 </td> 
 <td style="vertical-align:top;width:89pt;"> 43.12 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:99.2pt;"> uni小程序第1次 </td> 
 <td style="vertical-align:top;width:85.05pt;"> 0.44 </td> 
 <td style="vertical-align:top;width:92.15pt;"> 无 </td> 
 <td style="vertical-align:top;width:89pt;"> 15.63 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:99.2pt;"> uni小程序第2次 </td> 
 <td style="vertical-align:top;width:85.05pt;"> 1.85 </td> 
 <td style="vertical-align:top;width:92.15pt;"> 无 </td> 
 <td style="vertical-align:top;width:89pt;"> 15.20 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:49.4pt;"> 不限速 </td> 
 <td style="vertical-align:top;width:99.2pt;"> ABC小程序 </td> 
 <td style="vertical-align:top;width:85.05pt;"> 1.20 </td> 
 <td style="vertical-align:top;width:92.15pt;"> 2.01 </td> 
 <td style="vertical-align:top;width:89pt;"> 4.56 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:99.2pt;"> Uni小程序 </td> 
 <td style="vertical-align:top;width:85.05pt;"> 0.42 </td> 
 <td style="vertical-align:top;width:92.15pt;"> 无 </td> 
 <td style="vertical-align:top;width:89pt;"> 3.61 </td> 
 </tr> 
 </tbody> 
</table>

**七、结论**

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

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

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

[20210803120655349.png]: /images/20210813/64e38dccdef146e389498c961eb1c817.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70]: /images/20210813/f9b4c1a7f30f454ebaffb54bcbb03b4d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 1]: /images/20210813/f41eb620ceb74ac3830eab752da651c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 2]: /images/20210813/32f72353826d41b8845642a00216dae7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 3]: /images/20210813/5530e4f0ce47401da939ab1c8acbe38a.png
[https_developers.weixin.qq.com_miniprogram_dev_component_web-view.html]: https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
[20210803121034100.png]: /images/20210813/d19e21224ed243e4989cba1490a31c1a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 4]: /images/20210813/387665341839423f9d6cc4199eff3ac3.png