Sitespeed基本原理+docker安装与运行

一、工作原理简要说明

sitespeed.io是一款开源的Web性能测试工具，用来衡量Web网站的综合性能，帮助开发和测试人员分析网页的加载速度和渲染性能。它拥有一套插件，如Coach、Broswertime、Chrome-HAR等，帮助sitespeed搜集浏览器debug状态下的数据。
sitespeed.io评价网页的主要依据是：浏览器的网络请求和TimeLine中的Time Event。
Browsertime插件会使用Selenium NodeJS操控浏览器，让浏览器加载指定的页面，并执行配置的JS代码，采集Timeline中各个Time Event触发的时间数据，同时借助Chrome-HAR插件把页面中HTTP请求过程存储在.har文件中，为了便于分析，sitespeed.io利用PageXray插件将.har文件转换成JSON文件；然后Coach插件根据相应的指标进行打分，并提出改进意见；最后将结果以HTML报告的形式输出。

二、docker安装

前提：安装docker。Docker安装方式

使用Docker容器来获得Firefox，Chrome，XVFB和sitespeed.io的环境。它们与Graphite / InfluxDB和Grafana一起使用非常好，可用于监控网站。

执行安装命令

[Mac & Linux]

docker run --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io:9.8.1 https://www.sitespeed.io/
注：当下最新版本9.8.1

[Windows]

1）docker pull sitespeedio/browsertime
2）docker run --rm -v "$(pwd)":/browsertime sitespeedio/browsertime:5.7.3 https://www.sitespeed.io -b firefox

Tips: 除此，还可通过npm、yarn安装，详情可参考官方资料。

三、使用脚本添加相关配置后测试

脚本示例
module.exports = async function(context, commands) {
// add your own code here
}
js.run()

四、使用Docker进行测试

预测URL => www.jingyimes.com
执行命令 =>

➜ sitespeed-result docker run --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io http://www.jingyimes.com
Google Chrome 74.0.3729.131
Mozilla Firefox 66.0.4
[2019-08-27 04:26:55] INFO: Versions OS: linux 4.9.125-linuxkit nodejs: v10.13.0 sitespeed.io: 8.15.2 browsertime: 4.9.1 coach: 3.4.0
[2019-08-27 04:26:58] INFO: Running tests using Chrome - 3 iteration(s)
[2019-08-27 04:27:08] INFO: Testing url http://www.jingyimes.com iteration 1
[2019-08-27 04:28:01] INFO: http://www.jingyimes.com BackEndTime: 1106 DomInteractiveTime: 11384 DomContentLoadedTime: 11384 FirstPaint: 7324 PageLoadTime: 11520
[2019-08-27 04:28:01] INFO: VisualMetrics FirstVisualChange: 10100 SpeedIndex: 10100 PerceptualSpeedIndex: 10100 LastVisualChange: 10100
[2019-08-27 04:28:05] INFO: Testing url http://www.jingyimes.com iteration 2
[2019-08-27 04:28:39] INFO: http://www.jingyimes.com BackEndTime: 202 DomInteractiveTime: 3618 DomContentLoadedTime: 3618 FirstPaint: 3650 PageLoadTime: 3874
[2019-08-27 04:28:39] INFO: VisualMetrics FirstVisualChange: 4134 SpeedIndex: 4779 PerceptualSpeedIndex: 4495 LastVisualChange: 5034
[2019-08-27 04:28:41] INFO: Testing url http://www.jingyimes.com iteration 3
[2019-08-27 04:29:19] INFO: http://www.jingyimes.com BackEndTime: 211 DomInteractiveTime: 2997 DomContentLoadedTime: 2997 FirstPaint: 3322 PageLoadTime: 5422
[2019-08-27 04:29:19] INFO: VisualMetrics FirstVisualChange: 3366 SpeedIndex: 6026 PerceptualSpeedIndex: 4909 LastVisualChange: 6300
[2019-08-27 04:29:19] INFO: http://www.jingyimes.com 29 requests, 678.26 kb, backEndTime: 506ms (±244.82ms), firstPaint: 4.76s (±1.05s), firstVisualChange: 5.87s (±1.74s), DOMContentLoaded: 6s (±2.20s), Load: 6.94s (±1.91s), speedIndex: 6968 (±1311.85), visualComplete85: 7.12s (±1.25s), lastVisualChange: 7.14s (±1.24s), rumSpeedIndex: 4960 (±967.10) (3 runs)
[2019-08-27 04:29:22] INFO: HTML stored in /sitespeed.io/sitespeed-result/www.jingyimes.com/2019-08-27-04-26-55

Tips：
1.URL一定要加http，否则会报“www.jingyimes.com does not exist, is the path to the file correct?”;
2.该命令默认跑3次后生成报告；
3.可自定义启动的次数，如 sitespeed.io -n 5 -v url；

[2019-08-27 04:45:28] DEBUG: [sitespeedio.plugin.html] Render URL page index
[2019-08-27 04:45:28] DEBUG: [sitespeedio.plugin.html] Render URL run page 1
[2019-08-27 04:45:29] DEBUG: [sitespeedio.plugin.html] Render URL run page 2
[2019-08-27 04:45:29] DEBUG: [sitespeedio.plugin.html] Render URL run page 3
[2019-08-27 04:45:29] DEBUG: [sitespeedio.plugin.html] Render URL run page 4
[2019-08-27 04:45:29] DEBUG: [sitespeedio.plugin.html] Render URL run page 5
[2019-08-27 04:45:29] INFO: [sitespeedio.plugin.html] HTML stored in /sitespeed.io/sitespeed-result/www.jingyimes.com/2019-08-27-04-42-26

测试结果保存目录
执行完成后会给出测试结果所存地址，一般会在当前目录自动创建“sitespeed-result”目录用来保存结果，并以URL命名区分每次的结果；
进入文件夹，打开index.html查看网站质量。

五、使用中遇到的问题及解决方法

www.jingyimes.com does not exist, is the path to the file correct?
解决：URL前未加http。
Error: EISDIR: illegal operation on a directory...
解决：换一个目录执行命令。

参考：官方资料