前端页面的性能测试

介绍

随着 Web 应用的空前发展，前端业务逐渐复杂，为了处理这些复杂业务，前后端分离，出现了专门应对这种分离架构的应用开发框架，比如 Angular，React，Vue 等，从而也导致 Web 应用的复杂度大大增加，并出现了 SPA（Single Page web Application）。同时随着越来越多的用户使用移动设备访问 Web 应用，Web 应用也需要支持一些性能并不是很好的移动设备。所以为了度量和测试 Web 应用是不是在高复杂度的情况下，页面性能能满足用户的需求，我们需要对前端页面系统进行性能测试。

前端页面性能测试本质上和本地应用性能测试类似，其性能和运行应用的设备的性能强相关，即运行被测系统的硬件性能越强，性能也越强。所以测试前端页面性能需要找到一个固定配置的硬件来测试其性能基线，然后通过这个基线推测或者计算其他硬件配置下的性能情况。在项目开发的过程中持续对一个固定配置的硬件进行性能测试，也可以判断性能在开发过程中的趋势，从而第一时间发现性能问题。而测试性能基线，一般是选用最为普通和常规的配置，而不能选用最为流行的高性能配置，不然得到的基线很容易让测试人员有一种页面性能很高的误解。

前端页面性能一般都是有专业的性能工具来测试，比如免费的 WebPageTest、PageSpeed Insights、SiteSpeed 等，这些工具都能检测前端页面的各种性能指标，但是这些工具要么只提供基于在线服务，导致安全性无法保证；要么安装和配置比较复杂或者无法自动执行，导致很难和持续构建流水线集成。Google 开发的免费的 Lighthouse，很好地解决了以上的问题。

Lighthouse<