目录结构
一、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/
1.安装Sitespeed.io
Docker安装完成后，通过以下命令可下载安装Sitespeed.io所需的组件，如下：
docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io/
Pull 完成
2.连接Docker，驱动浏览器进行Web性能测试
1）连接Docker
通过Xshell远程连接，or通过命令docker-machine ssh default连接进入Docker容器
docker-machine ssh default 命令连接
Xshell连接
2）驱动浏览器进行测试
被测URL=https://www.baidu.com
操作命令：
docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.baidu.com
备注说明：
1）Sitespeed.io通过工具集（sitespeed.io，Browsertime，Coach，VisualMetrics）中的各个组件协作完成Web性能测试
2）Sitespeed.io测试过程中默认会迭代3次，一定程度上可以增加分析的可靠性
3）本次驱动测试的浏览器默认是：Chrome 70.x
4）测试完成之后，所生成的HTML报告，存放路径为：/home/docker/sitespeed-result/之下
利用WinSCP连接Docker虚拟机之后，即可在以上输出的指定目录下查看到本次Web性能测试生成的测试报告
报告的详细路径：/home/docker/sitespeed-result/www.baidu.com/2018-11-10-10-51-06
3）测试报告查看
综合评分、性能数据展示：
性能优化建议：
页面概要信息描述：
三、Sitespeed.io测试原理描述
Sitespeed.io工具集中的部分组件&作用：
- Sitespeed.io：基于其他一系列开源工具构建而成的sitespeed.io集
- Browsertime：作为驱动浏览器、收集Web性能度量指标的工具
- Coach：该组件知道如何构建快速响应的网站，通过分析测试页面，反馈所需调整的优化项
- VisualMetrics：通过从浏览器的屏幕进行视频录制，收集Web性能度量的视觉指标（如：视觉变化、速度指数）
Sitespeed.io测试执行过程：
- sitespeed.io启动并初始化所有需要的组件
- URL通过队列传递给组件
1）Browsertime获取URL并打开浏览器
2）开始对浏览器屏幕录制视频
3）驱动浏览器访问URL
4）当页面加载完成时，Browsertime会对页面截屏
5）然后运行一些JavaScript脚本(Coach、Browsertime脚本)来分析页面
6）停止视频录制，并关闭浏览器
7）分析视频，以获取视觉指标，如：第一视觉变化、速度指数
8）Browsertime传递队列上的所有指标和数据，以使其他组件可以使用这些指标和数据 - HTML/Graphite/InfluxDB组件，收集队列中的指标
- 当所有URL都被测试完成时，sitespeed会发送一条消息通知组件集进行总结指标，然后将指标呈现出来
- 组件集获取到所呈现的信息，然后HTML组件将这些信息以HTML格式写入到磁盘进行存储为测试报告
参考资料：
[1] Welcome to the wonderful world of web performance!
[2] PUBLIC|AUTOMATED BUILD <sitespeedio/sitespeed.io>
[3] web 性能测试与报告
[4] 前端利器，6款开源的Web性能优化辅助工具推荐
网友评论