Web Performance评估工具介绍

谈到性能测试，我们首先想到的可能是从后端服务的接口入手，对服务进行性能测试，例如采用Jemeter,Gatling,LoadRunner等工具可以很方便的对后端接口进行压测评估系统性能。除了从后端接口对web系统进行测试外，实际还可以从web前端页面评估系统的性能，有很多在线工具支持从web前端出发评估系统性能，例如开源的在线工具PageSpeed或者商业的在线工具speedcurve等。通过在线工具输入web系统地址即可快速得到性能评估数据，使用非常方便，但在线工具也有局限性，例如，某些企业考虑到安全性，不愿意将数据存放在第三方的在线系统上；或者某些企业期望web performance测试系统能够与内部系统集成，性能测试数据能在多个系统共享；对于后面两类需求，在线的web performance评估系统都无法满足，所以，对于有后面两类需求的企业来说，更好的方式是采用其他离线工具来完成web performance的评估工作。那么，哪些离线工具支持web performance数据的采集呢？下面列举了常用的四个工具，并进行了简要对比，具体如下所示：

上面对各个工具或者插件提供的功能进行了简要对比，接下来就从第一个工具开始，看看如何通过这些工具评估web系统性能。Lighthouse即支持命令行方式，也支持插件运行方式，如果采用命令行方式，npm install lighthouse进行安装，安装后可以通过lighthouse --help查看命令中支持的参数，如下图所示，可以看到除收集performance metrics外，lighthouse还支持对网络设置throttling来模拟网络质量比较差的情况下web性能表现。

执行lighthouse https://xxx.yyy后，默认会生成html格式的报告，报告中给出了google vitals的指标值，还对各个维度进行了打分，且还给出了各种优化建议。可以看到通过lighhouse可以很方便的对web的性能进行评估，并且根据改进建议进行及时的修复，部分lighthouse报告结果如下图所示：

除命令行方式外，lighthouse还支持插件运行方式，在chrome上安装lighthouse插件后，可以在浏览器上方便的选择需要收集的性能数据以及运行的device等，具体设置如下图所示：

因为Cypress-Audit底层也采用lighthouse，故Cypress-Audit的使用这里不再介绍，详细信息可查看这里。接下来看看browsertime，browsertime也提供npm的包，安装后即可通过browsertime https://xxx.yyy收集web性能数据，执行性能测试收集命令后，会在命令执行的目录下生成browsertime-results的目录，里面存放了生成的har文件和json文件，json文件中存放了收集的性能数据。browsertime也提供命令行运行方式，故通过browsertime -h可查看browsertime可带入的参数。可以看到browsertime支持的浏览器更加广泛，而且支持在Android，IOS模拟器上收集性能数据,这也是browsertime的优势之一。

虽然Browsertime可以在多个浏览器上收集metrics的数据，但数据存放在json文件中，而browsertime不提供数据展示功能，也无法给出具体的改进建议，所以，总结而已，browsertime仅仅是一个性能数据收集工具，数据存放在json文件里面，如果要展示数据，需要自定义工具从json文件中解析数据并进行展示。相较于browsertime，sitespeed.io则提供了更加完善的功能。

sitespeed.io集成了一系列开源工具，实现了从数据收集到存储到展示的所有功能，因为sitespeed.io也提供了npm包和命令行运行方式，所以npm install安装后，执行sitespeed.io命令即可看到所有支持的命令行参数。因为sitespeed.io是集成browsertime做数据采集，所以browsertime命令行支持的所有参数，sitespeed.io都支持，另外，sitespeed.io还提供了和influxDB,Graphite集成，在命令行参数中传入influxDB或者Graphite的服务地址，服务登陆等信息后，即可把收集的性能数据存储到influxDB或者Graphite中。此外，还支持与Grafana集成，这样可以方便的在Grafana中展示收集的性能数据。接下来先看看sitespeed.io如何与Graphite等集成

Sitespeed.io与Graphite和Grafana集成

sitespeed.io的官网提供非常方便的方式来和Graphite和Grafana集成，首先下载docker-compose.yaml文件(https://raw.githubusercontent.com/sitespeedio/sitespeed.io/main/docker/docker-compose.yml)，该文件中配置了Graphite和Grafana的image，执行“docker-compose up -d ”会自动下载和启动graphite和grafana，执行命令后，在浏览器中输入"http://127.0.0.1:3000"即可打开Grafana的dashboard，接着执行sitespeed.io的命令收集metrics数据，

docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:26.1.0 https://www.sitespeed.io/ -b chrome --graphite.host=host.docker.internal"

再次查看grafana的dashboard，即可在dashboard上看到收集的收据。结果如下所示：

Sitespeed.io支持lighthouse等插件运行

siteSpeed.io支持与多个插件运行，例如lighthouse和pagespeed等，如果要运行lighthouse插件，有两种运行方式，方式一：执行如下命令

git clone https://github.com/sitespeedio/sitespeed.io.git
cd sitespeed.io
npm install
bin/sitespeed.js --plugins.add ../plugin-lighthouse/ https://www.sitespeed.io/ -n 1

方式二：使用Docker image，所有添加了plus1 tag的image，都包含了插件。

docker run --shm-size=1g --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:26.1.0-plus1 https://www.sitespeed.io/ --plugins.add analysisstorer --plugins.add /lighthouse

运行后在报告文件目录下的/pages/xxx/data目录下，存放lighthouse相关的报告结果内容，lighthouse的报告结果与直接执行lighthouse命令收集的结果相同。在执行过程中，如果要运行lighthouse插件，实际执行过程是：先采用browsertime收集metrics数据，再采用lighthouse收集metrics数据，执行结果日志如下所示：

除了采用命令行运行方式外，sitespeed.io还支持配置文件方式收集metrics数据。例如，如果要收集多个url的metrics数据，那么可以把所有url放到一个txt文件中，执行命令"sitespeed.io url.txt"一次性收集多个页面数据。

Sitespeed.io在simulator上收集metrics数据

如果要用sitespeed.io在模拟器上收集metrics数据，对于ios而言，需要安装Xcode，提前启动一个ios simulator，启动后，可以命令查看正在运行的simulator,"xcrun simctl list devices | grep Booted",获取到设备ID后，执行如下命令收集metrics数据。

sitespeed.io https://thoughtworks.com -b safari --safari.useSimulator --safari.deviceUDID  7BE68328-A271-4A71-B40A-E187784639BF

可以看到执行命令后，会在模拟器上开启safari浏览器收集数据，收集完成后会自动关闭simulator。需要注意一点：如果在IOS Simulator上收集数据，只支持开启Safari浏览器收集数据，而采用safari浏览器只能收集部分性能数据，因为safari浏览器没有提供完善的expose metrics的接口。如果在Android设备上收集数据，只支持Chrome浏览器。收集数据命令如下所示：

sitespeed.io --android https://www.sitespeed.io

配置文件方式收集metrics数据

上面都是采用命令行方式收集metrics数据，实际还可以通过配置文件的方式，将相关参数放到json文件中，这样可以配置各种各样收集数据的自定义配置文件。如下图所示，设置了收集数据时采用的浏览器和次数，执行命令即可按照配置文件内容收集metrics，另外，多个json配置文件可以继承。

sitespeed.io --config  config.json https://apple.com

收集登陆后的页面的metrics数据

很多web系统都需要登陆后才能访问某些页面，对于这些页面的metrics收集，sitespeed.io是如何支持的呢？如果需要登陆，那么需要在js中编写登陆操作步骤，登陆后开始收集某些页面数据，js脚本如下所示，执行命令"sitespeed.io script.js --multi -n 1",更多脚本命令可以参考官网文档。

以上就是对sitespeed.io工具使用的说明，更多详细信息可查看官网文档。