利用Docker安装Web前端性能测试工具Sitespeed.io

曾经终败给现在 2023-06-05 08:56 7阅读 0赞

# 目录结构 #

一、Sitespeed.io概述 1.Sitespeed.io简介 2.Sitespeed.io使用场景 二、Sitespeed.io的安装和使用 1.安装Sitespeed.io 2.连接Docker，驱动浏览器进行Web性能测试 1）连接Docker 2）驱动浏览器进行测试 3）测试报告查看 三、Sitespeed.io测试原理描述

### 一、Sitespeed.io概述 ###

##### 1.Sitespeed.io简介 #####

> Sitespeed.io：是一款开源的Web性能测试工具，用来衡量Web网站的综合性能，帮助开发和测试人员分析网页的加载速度和渲染性能。  
> Sitespeed.io通过驱动浏览器（如：Chrome、Firefox）进行测试，然后从开发者的站点收集多个页面的数据，并根据最佳实践等规则来分析这些网页，然后将结果以HTML报告的形式输出。

*Sitespeed.io满足了一个完整的Web性能测试工具所需的3个关键功能：*  
1）使用真实的浏览器测试Web站点，模拟真实的用户进行请求连接，收集以用户为中心的重要指标，如：响应速度指标、第一视觉呈现  
2）可分析页面的组成，并给出相应性能反馈，增加终端用户的使用体验友好性  
3）通过收集和保存页面组成的数据，便于跟踪定位

##### 2.Sitespeed.io使用场景 #####

1）运行于持续集成环境中，将代码提交or迁入到测试环境时，及早发现Web性能问题，便于提早进行回归检查  
2）监控生产环境（正式环境）中的Web性能表现，发现异常及早提醒回归

### 二、Sitespeed.io的安装和使用 ###

官网-传送门：[https://www.sitespeed.io/][https_www.sitespeed.io]

![4866277-bdc31f067a6c2408.png][]

##### 1.安装Sitespeed.io #####

Docker安装完成后，通过以下命令可下载安装Sitespeed.io所需的组件，如下：

docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io/

![4866277-0689a457cf28c15f.png][]

![4866277-eb92d8de9fb3bd7d.png][]

Pull 完成

##### 2.连接Docker，驱动浏览器进行Web性能测试 #####

1）连接Docker  
通过Xshell远程连接，or通过命令`docker-machine ssh default`连接进入Docker容器

![4866277-6bf7f495e0c29eba.png][]

docker-machine ssh default 命令连接

![4866277-8294dfd259669be7.png][]

Xshell连接

2）驱动浏览器进行测试  
被测URL=[https://www.baidu.com][https_www.baidu.com]  
操作命令：

docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.baidu.com

![4866277-606a57f3cb1beb6f.png][]

备注说明：  
1）Sitespeed.io通过工具集（sitespeed.io，Browsertime，Coach，VisualMetrics）中的各个组件协作完成Web性能测试  
2）Sitespeed.io测试过程中默认会迭代3次，一定程度上可以增加分析的可靠性  
3）本次驱动测试的浏览器默认是：Chrome 70.x  
4）测试完成之后，所生成的HTML报告，存放路径为：`/home/docker/sitespeed-result/`之下

![4866277-ecea3e2a98322c6a.png][]

利用WinSCP连接Docker虚拟机之后，即可在以上输出的指定目录下查看到本次Web性能测试生成的测试报告  
报告的详细路径：`/home/docker/sitespeed-result/www.baidu.com/2018-11-10-10-51-06`

![4866277-5a203437ee4d47d9.png][]

![4866277-203e51ed778377d3.png][]

3）测试报告查看  
综合评分、性能数据展示：

![4866277-127474107205d59c.png][]

![4866277-f44ab7aaa5539aa6.png][]

性能优化建议：

![4866277-05d6029c037b30f3.png][]

页面概要信息描述：

![4866277-e76d95c20cdb815f.png][]

![4866277-82a407895d1df93c.png][]

### 三、Sitespeed.io测试原理描述 ###

#### Sitespeed.io工具集中的部分组件&作用： ####

*  Sitespeed.io：基于其他一系列开源工具构建而成的sitespeed.io集
 *  Browsertime：作为驱动浏览器、收集Web性能度量指标的工具
 *  Coach：该组件知道如何构建快速响应的网站，通过分析测试页面，反馈所需调整的优化项
 *  VisualMetrics：通过从浏览器的屏幕进行视频录制，收集Web性能度量的视觉指标（如：视觉变化、速度指数）

#### Sitespeed.io测试执行过程： ####

1.  sitespeed.io启动并初始化所有需要的组件
2.  URL通过队列传递给组件  
    1）Browsertime获取URL并打开浏览器  
    2）开始对浏览器屏幕录制视频  
    3）驱动浏览器访问URL  
    4）当页面加载完成时，Browsertime会对页面截屏  
    5）然后运行一些JavaScript脚本(Coach、Browsertime脚本)来分析页面  
    6）停止视频录制，并关闭浏览器  
    7）分析视频，以获取视觉指标，如：第一视觉变化、速度指数  
    8）Browsertime传递队列上的所有指标和数据，以使其他组件可以使用这些指标和数据
3.  HTML/Graphite/InfluxDB组件，收集队列中的指标
4.  当所有URL都被测试完成时，sitespeed会发送一条消息通知组件集进行总结指标，然后将指标呈现出来
5.  组件集获取到所呈现的信息，然后HTML组件将这些信息以HTML格式写入到磁盘进行存储为测试报告

转载于:https://www.cnblogs.com/Zfc-Cjk/p/11207811.html

[https_www.sitespeed.io]: https://www.sitespeed.io/
[4866277-bdc31f067a6c2408.png]: /images/20230601/8e90744454b8460cac12d676eca8d67f.png
[4866277-0689a457cf28c15f.png]: /images/20230601/63dd55228a7140f19b6d5d9fcf9f9122.png
[4866277-eb92d8de9fb3bd7d.png]: /images/20230601/1157e80c25bd485d9474caa01ca31d85.png
[4866277-6bf7f495e0c29eba.png]: /images/20230601/a033ffc3cf064c8fbc33f391bc70400c.png
[4866277-8294dfd259669be7.png]: /images/20230601/446191bc5abe4415840bd181dded3db8.png
[https_www.baidu.com]: https://www.baidu.com/
[4866277-606a57f3cb1beb6f.png]: /images/20230601/1d0fbe53bed742f9b05bf0d67dd99b4a.png
[4866277-ecea3e2a98322c6a.png]: /images/20230601/533d8788bf894c7e95284e90bc84ece2.png
[4866277-5a203437ee4d47d9.png]: /images/20230601/e99e602506ad42f6a203442297086397.png
[4866277-203e51ed778377d3.png]: /images/20230601/4b44a3f7900543878179ca30b5cbbfb8.png
[4866277-127474107205d59c.png]: /images/20230601/94927182ba0545578bd63b386bfa894a.png
[4866277-f44ab7aaa5539aa6.png]: /images/20230601/7e29828db8a4440991f380af015f4285.png
[4866277-05d6029c037b30f3.png]: /images/20230601/225b0d99fd5e4f40abfc49708559ac08.png
[4866277-e76d95c20cdb815f.png]: /images/20230601/6f3301b2c1e341ba9734e464541311c9.png
[4866277-82a407895d1df93c.png]: /images/20230601/89007e2f03494a9b92e56b959b982d6f.png