手把手教会你做前端性能测试！

2022年9月7日 386点热度 0人点赞 0条评论

普通用户如何评价一个网站的体验好不好呢？

除了满足他的功能需求以外，用得爽不爽可能是最大的评估因素。这个爽不爽可以简单理解为快不快，好不好看，是不是符合他的操作习惯等等。而这里的快不快就是我们说的性能。

有数据表明，性能在一定程度上跟公司的收益直接相关。

如下所示：

性能	收益
Google 延迟 400ms	搜索量下降 0.59%
Bing 延迟 2s	收入下降 4.3%
Yahoo 延迟 400ms	流量下降 5-9%
Mozilla 页面打开减少 2.2s	下载量提升 15.4%
Netflix 开启 Gzip	性能提升 13.25% 带宽减少50%

为什么性能会跟收益有关系呢？ 因为慢了用户就不用了，用户少了收益自然就下降了。所以提升性能势在必行。

那我们应该从哪些方面提升网站的性能？其实影响性能的因素有很多，大致可分为前端性能和后端性能。本文只讨论前端性能，也就是从用户输入网址或点开链接到页面打开的速度。

应该怎么测试前端的性能呢？

1. 先了解网页加载的过程

在讲怎么对前端进行性能测试之前，我们需要先了解从输入网址开始到页面显示出来这个过程中都经过了什么。

大致的流程是：

输入网址：在浏览器中输入 URL 或点击链接（一般都是域名）；
解析域名：浏览器连接到DNS（域名解析系统）将域名解析为对应的 IP 地址；
建立连接：然后与这个 IP 地址确定的那台服务器建立起 TCP 网络连接（三次握手）；
发送请求：随后向服务端发送 HTTP 请求；
接收响应：服务端处理完请求后，将数据放在 HTTP 响应里返回给客户端；
关闭连接：数据发送完毕之后关闭 TCP 连接（四次挥手）；
渲染页面：浏览器解析模型（HTML&CSS）、渲染页面（布局、绘制）；
页面显示：渲染完毕后，页面呈现给用户，并时刻等待响应用户的操作。

如下图所示：

如果从输入网址后，用户可感知的过程出发，大致可以分为：

显示白屏：从屏幕空白到第一个画面出来。
首次有内容显示：页面在首次有内容显示出来。
显示部分内容：页面中显示部分内容。
页面可以操作：页面所有内容都显示出来，并且可以正常操作。

如下图所示：

图片来自网络，内容有修改。

2. 再确定关注哪些性能指标

了解了页面的加载过程，我们就需要针对每个过程制定指标了，这样才能衡量性能好不好。

基于用户可感知的过程（用户体验）的常见指标有：

白屏时间（FirstPaint，FP）：从屏幕空白到第一个画面出来的时间；
首次内容渲染时间（FirstContentful Paint，FCP）：渲染出首个文本或图片的时间；
最大内容绘制时间（Largest Contentful Paint，LCP）：渲染出最大文本或图片的时间；
可交互时间（Time To Interactive，TTI）：网页需要多长时间才能提供完整交互功能。

怎么衡量这些指标到底好不好呢？

参考业界的标准：以业界标准的指标作为参考，跟业界对齐；
参考竞品的数据：以竞品的性能指标作为参考，向对手学习；
参考监控的数据：采集用户的前端性能数据作为参考；

比如参考业界的指标：

指标	快	中	慢
First Contentful Paint	0~1.8s	1.8~3s	>3s
First Meaningful Paint	0~2s	2~4s	>4s
Speed Index	0~3.4s	3.4~5.8s	>5.8s
First CPU Idle	0~4.7s	4.8~6.5s	>6.5s
Time to Interactive	0~3.8s	3.9~7.3s	>7.3s
Max Potential First Input Delay	0~130ms	130~250ms	>250ms
Total Blocking Time	0~200ms	200~600ms	600ms
Largest Contentful Paint	0~2.5s	2.5~4s	4s

来自：https://mp.weixin.qq.com/s/-AGuUT0sPKn4pkZuP8gqLA

当然也要关注影响性能的因素，比如页面请求数、图片大小、文件是否压缩、是否使用 CDN 等。

由此可以制定出自己产品的性能指标，比如：

指标项		建议/参考值	指标项说明
指标项		建议/参考值	指标项说明
耗时	finish(s)	<5s	页面上所有 HTTP 请求发送到响应完成的时间
	DOMContentLoaded(s)	<1s	DOM 树构建完成
	Load(s)	<3s	页面加载完毕
	First Contentful Paint	<1.8s	测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间
	Time to Interactive	<3.8s	测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间。
	Speed Index（网页速度）	<3.4s	衡量页面加载过程中内容从视觉上呈现的速度。
	Total Blocking Time（总阻塞时间）	<200ms	一个页面的总阻塞时间是在 FCP 和 TTI 之间发生的每个长任务的阻塞时间总和。
	Largest Contentful Paint	<2.5s	根据页面首次开始加载的时间点来报告可视区域内可见的最大图像或文本块完成渲染的相对时间。
	Cumulative Layout Shift	<0.1s	测量整个页面生命周期内发生的所有意外布局偏移中最大一连串的布局偏移分数
页面	页面请求数	<80个	页面所有的 HTTP 请求个数。
	JS	/	控制体积和数量，体积越大加载耗时越久，数量越多网络交互耗时越久，可参照同行竞品数据。
	CSS	/	尽可能的少，可参照同行竞品数据。
	图片	<100k
	页面资源	/	控制资源大小，资源越大加载耗时越久，可参照同行竞品数据
	CDN	静态资源使用 CDN

3. 选择合适的测试工具

关注的指标定好了，下面看怎么拿到这些指标。

1. Lighthouse：前端性能自动化测试分析工具

Lighthouse 是谷歌开源的一款 Web 前端性能自动化测试分析工具，主要用于改进网络应用的质量，我们只需要为其提供一个被测网址，它就能自动进行一些测试，最终会生成一个包括页面性能、PWA（Progressive Web apps，渐进式 Web 应用）、可访问性（无障碍）、最佳实践、SEO 的报告清单提供参考。

我们可以通过 Chrome 开发者工具、Chrome 扩展、命令行、Node Module 使用 Lighthouse。

以 Chrome 开发者工具为例，使用方法如下：

STEP 1. 用 Chrome/Edge 打开被测网址，按 F12 ，开启开发者工具，就能看到 Lighthouse 了。

如下所示：