前端低带宽测试方案

1. 简介

1.1 背景

各行业线都有反馈网络因素导致的项目问题，因用户网络带宽低，导致客户端登录耗时超过 6 秒。

针对此类场景，联合前端、体验、测试等角色共同分析根因，对前端页面进行分类，不同类型定义不同的性能规格。

1.2 适用范围

该方案适用所有软件产品涉及的前端 eb、客户端、APP。

1.3 名词解释

名词	说明
响应时间	指的是从前端发起一个请求开始，到前端接收到从服务端返回的响应结束，这个过程所耗费的时间，单位为秒或毫秒
首绘时间（FP）	是时间线上的第一个 “ 时间点 “，它代表浏览器第一次向屏幕传输像素的时间，也就是页面在屏幕上首次发生视觉变化的时间
内容首绘（FCP）	它代表浏览器第一次向屏幕绘制 “ 内容 “。只有首次绘制文本、图片（包含背景图）、非白色的 canvas 或 SVG 时才被算作 FCP
首次有效绘制（FMP）	表示页面的 “ 主要内容 “ 开始出现在屏幕上的时间点。它是我们测量用户加载体验的主要指标
可见时间（LCP）	表示可视区 “ 内容 “ 最大的可见元素开始出现在屏幕上的时间点
可用时间（TTI）	表示网页第一次完全达到可交互状态的时间点。可交互状态指的是页面上的 UI 组件是可以交互的（可以响应按钮的点击或在文本框输入文字等）
动画补全时间	表示网页已完全加载完毕，整个界面所有的功能完备、各插件全部加载、动画（若有）流畅播放；即上图中，从点击功能到 CLS 所消耗的时间

FP 与 FCP 主要区别

• FP 是当浏览器开始绘制内容到屏幕上的时候，只要在视觉上开始发生变化，无论是什么内容触发的视觉变化，在这一刻，这个时间点，叫做 FP。
• FCP 指的是浏览器首次绘制来自 DOM 的内容。例如：文本，图片，SVG，canvas 元素等，这个时间点叫 FCP

2. 测试方案

2.1 低带宽定义

本方案不具体定义带宽处于何种情况下算是低带宽。各产品对应的最低带宽需求由产品经理根据产品的实际生产环境要求定义增加到产品基础的配置要求中，测试团队基于该指标测试交互响应速度。

若产品中包含 APP、web、客户端等多种前端访问类型，APP 与 Web 的低带宽指标需要分开给出。

各产品在提需求申请时，提供的产品基础配置表中，需要包含 PC 机的最低配置需求、APP/Web 最低带宽指标;

2.2 页面分类及响应时间

2.2.1 页面分类

不同的前端页面，可以有不同的响应时间要求，对前端页面进行分类，具体如下:

• 高效页面: 登录页、基础框架页、门户首页
• 常规页面: 基础功能、地图
• 可容忍延迟页面: 平台端 dashboard、大屏可视化界面、3D 地图
• 特殊页面: 后端服务重启页面、安装部署启动时间、平台重启时间
• 其他: 执行过程中如遇页面类型争议的，可由 UED、前端、测试共同评审确定页面类型

2.2.2 页面响应时间

类型	可见时间		可用时间		动画补全时间	备注
最优时间	最低标准	最优时间	最低标准
高效页面	/	500ms	1s	2s	3s
常规页面	/	500ms	1s	3s	3s
可容忍延迟页面	/	1s	2s	5s	5s
特殊页面

注：

• 若页面响应超过定义的最低标准，则需要提单并优化。
• 测试时主要关注 “ 可用时间 “。

2.3 故障等级约定

对于页面响应，在环境满足产品最低带宽要求下，若响应时间超过约定的最低响应时间，则需要测试提单、研发优化修改。

具体故障等级约定如下：

• 满足最低标准不提单；
• 超过最低标准，但不超过 50% 响应时间，提 “ 轻微 “ 等级；
• 超过最低标准 50% 但不超过 100% 响应时间，提 “ 一般 “ 等级；
• 超过最低标准 100% 响应时间，提 “ 严重 “ 等级。

3. 前端性能验证工具

3.1 Chrome 浏览器的 LightHouse

打开 Chrome 浏览器的开发者工具（点击 F12），点击 LightHouse。

然后点击 Analyze page load 即可看到本页面的性能统计。

内容首绘时间和可用时间都在里面有明确的统计。

3.2 LightHouse 使用简介

3.2.1 三种模式

三种模式介绍如下：

• 导航模式（默认）
  • 获取性能分数和所有性能指标。
  • 评估渐进式 Web 应用功能。
  • 在页面加载后立即分析可访问性。
• 时间跨度模式
  • 测量某个时间范围内的布局偏移和 JavaScript 执行时间，包括交互。
  • 发现性能机会，以改善长期存在的页面和 SPA 的体验。
• 快照模式
  • 分析当前状态的页面。
  • 查找 SPA 或复杂表单深处的可访问性问题。
  • 评估隐藏在交互后面的菜单和 UI 元素的最佳实践。

3.2.2 报告解读

 点击 Analyze page load 后，生成的报告如上截图，对于打分部分：

• 0 - 49（慢）：红色
• 50 - 89（平均值）： 橙色
• 90 - 100（快）： 绿色

一般情况下，只要打分不在 0 – 49 范围内，则无须做优化处理。

常见的问题种类：

• Performance：性能检测，如网页的加载速度、响时间等。
• Accessibility：铺助检测，如网页的可访问性问题，HTML 代码标签之类的优化等。
• Best Practices：实践性检测，如网页安全性，如是否开启 HTTPS、网页存在的漏洞等。
• SEO：Search Engine Optimisation 搜索引擎优化检测，如网页 title 是否符合搜索引擎的优化标准等。
• PWA：检测对 Progressive Web App 的性能影响。