前端性能测试

前言

当一个站点内容非常丰富，功能非常强大时，它所需要加载的文件会是非常庞大的，打开站点对网络的要求会很高，在弱网的情况下打开它会有更长时间的等待，对用户来说是非常不友好的，这时候需要对前端性能进行优化。

但是，该从哪里入手呢？

我们可以想象一下，通常一个前端页面主要是由 html、css、js、图片等资源构成。影响用户浏览体验的可能有服务端数据返回的时间、网络传输的时间和页面加载时间等因素。

现在知道了原因，可以想办法对这些因素进行前端性能的测试，并针对性能测试的结果进行优化。

该如何进行性能测试呢？其实有现成的工具可以供我们使用。

性能测试工具

现在有很多很好用的测试性能的工具，我们可以根据自己的需要选择适合自己的。

作用

测试工具可以计算出包括资源加载、页面渲染、网络传输以及服务器解析等综合因素在内的加载时间指标，并对页面性能进行评估分析，找出影响性能的主要因素和瓶颈，并给出一定的优化建议和解决方法，从而提升用户体验。

Lighthouse

作为一名使用谷歌开发的程序猿，使用 Lighthouse 再方便不过了。

Lighthouse 是谷歌开源的一款 Web 前端性能自动化测试工具，它主要用于帮助改进网络应用的质量，可以适用于网页和移动端。

Lighthouse 可以分析 web 应用程序和 web 页面，收集关于开发人员最佳实践的现代性能指标和见解，让开发人员根据生成的评估页面，来进行网站优化和完善，提升用户体验。

Lighthouse 的测试项包括页面性能、可访问性、最佳实践、SEO 、PWA（Progressive Web apps，渐进式 Web 应用）。Lighthouse 会对各个测试项的结果打分，为你优化性能提供参考，来帮助你看看使用哪些措施改进你的应用。

可以使用以下命令全局安装到电脑上，或者 Chrome 拓展程序，也可以使用浏览器的 F12 功能，打开开发者工具。

npm install -g lighthouse

命令行和 Chrome 拓展程序，这篇文章暂时不讲，有兴趣的同学可自行百度，我们现在主要使用浏览器的 F12 功能来具体看一下：

Lighthouse 初打开页面

点击 Generate report 就会开始分析打开的网站

分析中

分析结束后得出性能分析报告

指标

以下是具体的指标，每个指标下面都有优化建议。

1. 性能

性能

2. 可访问性

可访问性

3. 最佳实践

最佳实践

4. SEO

SEO

Speedcurve

Speedcurve 可以帮助追踪自己的性能表现，以及竞争对手的性能表现。它可以用来查看某个因素在不同站点的速度表现，并且还提供了综合监控。综合监控是指在受控环境中模拟网站，在其中可以自定义选项，比如网络速度、设备、操作系统等等。

Speedcurve 是一个前端性能综合监控网站，通过输入被测网站的 url 地址，进行测试。

Speedcurve 首页

选择访问的设备

选择设备

得出性能报告

性能报告

也可以查看具体的性能指标：

• 最大的图片的渲染时间

图片

• 首页加载完成全部片段

首页加载

• 渲染时间

渲染

• 页面加载时间

页面加载时间

• 页面渲染

页面渲染

• 交互

交互

• CPU

CPU

• 请求数

请求数

• 文件大小

文件大小

总结

我们可以通过自动化测试工具去测试网页的性能，并根据性能报告去优化前端页面，以提升用户的体验。

1. Lighthouse 可以从页面性能、可访问性、SEO 等几方面给出优化建议，开发人员可以根据评估页面的标准和优化建议，来进行网站优化和完善，提升用户体验。

2. Speedcurve 可以用来查看某个因素在不同站点的速度表现，并且提供了综合监控，可以从多个方面去监控前端的性能，甚至可以自定义选项，比如网络速度、设备、操作系统等。