sitespeedio/browsertime

Browsertime - 你的浏览器，你的页面，你的脚本！

!Browsertime

从你的浏览器中，在终端里访问Web性能时间线！

Browsertime允许你：

1. 直接从浏览器查询时间数据，获取http://kaaes.github.io/timing/info.html%E3%80%81%E7%94%A8%E6%88%B7%E6%97%B6%E9%97%B4%E3%80%81%E8%B5%84%E6%BA%90%E6%97%B6%E9%97%B4%E3%80%81%E9%A6%96%E6%AC%A1%E7%BB%98%E5%88%B6%E5%92%8Chttps://github.com/WPO-Foundation/RUM-SpeedIndex%E3%80%82
2. 生成HAR文件（Firefox使用https://github.com/firebug/har-export-trigger%EF%BC%8CChrome%E9%80%9A%E8%BF%87%E8%A7%A3%E6%9E%90%E6%97%A5%E5%BF%97%E7%94%9F%E6%88%90%EF%BC%89%E3%80%82
3. 在浏览器中运行自定义Javascript脚本，并获取每次运行的统计数据。
4. 录制屏幕视频并分析结果，获取首次视觉变化、速度指数、85%视觉完成度和最后视觉变化。

重要提示！ master分支现在是即将发布的2.0.0 alpha版本，https://github.com/sitespeedio/browsertime/tree/1.x%E6%98%AF%E6%9C%80%E6%96%B0%E7%A8%B3%E5%AE%9A%E7%89%88%E6%9C%AC%E3%80%82

简单示例

使用我们的Docker镜像（包含Chrome、Firefox、XVFB和录制视频所需依赖）：

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

或使用node：

bash
$ bin/browsertime.js https://www.sitespeed.io

在Chrome中加载[***]

更多示例

查看示例文档。

支持的浏览器

Browsertime在桌面端支持Firefox和Chrome，在Android上支持Chrome。

我们计划https://github.com/tobli/browsertime/issues/150%EF%BC%8C%E5%BD%93iOS Safari支持WebDriver时也将添加支持。

工作原理

Browsertime使用Selenium NodeJS驱动浏览器。它启动浏览器、加载URL、执行可配置的Javascript收集指标、生成HAR文件。

Firefox的HAR文件通过https://github.com/firebug/har-export-trigger%E8%8E%B7%E5%8F%96%EF%BC%8CChrome%E5%88%99%E4%BD%BF%E7%94%A8https://github.com/sitespeedio/chrome-har%E8%A7%A3%E6%9E%90%E6%97%B6%E9%97%B4%E7%BA%BF%E6%97%A5%E5%BF%97%E7%94%9F%E6%88%90HAR%E6%96%87%E4%BB%B6%E3%80%82

你还可以在访问URL之前（--preScript）和之后（--postScript）运行自定义Selenium脚本，例如登录/登出或其他操作。

速度指数和视频

使用https://hub.docker.com/r/sitespeedio/browsertime/%E5%8F%AF%E8%BD%BB%E6%9D%BE%E5%BD%95%E5%88%B6%E8%A7%86%E9%A2%91%E5%B9%B6%E8%AE%A1%E7%AE%97%E9%80%9F%E5%BA%A6%E6%8C%87%E6%95%B0%EF%BC%8C%E5%9B%A0%E4%B8%BA%E5%AE%83%E5%8C%85%E5%90%AB%E8%BF%90%E8%A1%8Chttps://github.com/WPO-Foundation/visualmetrics%E6%89%80%E9%9C%80%E7%9A%84%E6%89%80%E6%9C%89%E4%BE%9D%E8%B5%96%E3%80%82

默认视频包含计时器并显示指标发生时间，可通过--video.addTimer false关闭。

使用Docker测试

你可以在本地使用Docker构建和测试更改：

bash
$ docker build -t sitespeedio/browsertime .
$ docker run --shm-size=1g --rm -v "$(pwd)":/browsertime sitespeedio/browsertime -n 1 --video --speedIndex https://www.sitespeed.io/

网络连接配置

你可以通过Docker网络桥接限制网络连接速度，以便更容易捕获性能回归。默认使用https://github.com/WPO-Foundation/tsproxy%EF%BC%8C%E4%BD%86%E7%9B%AE%E5%89%8D%E4%B8%8ESelenium%E5%AD%98%E5%9C%A8%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98%EF%BC%88%E8%AF%A6%E8%A7%81https://github.com/sitespeedio/browsertime/issues/229%EF%BC%89%E3%80%82

在安装了tc的服务器上，可通过以下脚本创建不同网络环境的Docker网络桥接：

bash
#!/bin/bash
echo '启动Docker网络'
docker network create --driver bridge --subnet=192.168.33.0/24 --gateway=192.168.33.10 --opt "com.docker.network.bridge.name"="docker1" 3g
tc qdisc add dev docker1 root handle 1: htb default 12
tc class add dev docker1 parent 1:1 classid 1:12 htb rate 1.6mbit ceil 1.6mbit
tc qdisc add dev docker1 parent 1:12 netem delay 300ms

docker network create --driver bridge --subnet=192.168.34.0/24 --gateway=192.168.34.10 --opt "com.docker.network.bridge.name"="docker2" cable
tc qdisc add dev docker2 root handle 1: htb default 12
tc class add dev docker2 parent 1:1 classid 1:12 htb rate 5mbit ceil 5mbit
tc qdisc add dev docker2 parent 1:12 netem delay 28ms

docker network create --driver bridge --subnet=192.168.35.0/24 --gateway=192.168.35.10 --opt "com.docker.network.bridge.name"="docker3" 3gfast
tc qdisc add dev docker3 root handle 1: htb default 12
tc class add dev docker3 parent 1:1 classid 1:12 htb rate 1.6mbit ceil 1.6mbit
tc qdisc add dev docker3 parent 1:12 netem delay 150ms

docker network create --driver bridge --subnet=192.168.36.0/24 --gateway=192.168.36.10 --opt "com.docker.network.bridge.name"="docker4" 3gem
tc qdisc add dev docker4 root handle 1: htb default 12
tc class add dev docker4 parent 1:1 classid 1:12 htb rate 0.4mbit ceil 0.4mbit
tc qdisc add dev docker4 parent 1:12 netem delay 400ms

运行容器时添加--network指定网络，同时需告知Browsertime网络连接由外部配置。例如使用cable网络：

bash
$ docker run --shm-size=1g --network=cable --rm sitespeedio/browsertime -c cable --connectivity.engine external --speedIndex --video https://www.sitespeed.io/

使用3g网络：

bash
$ docker run --shm-size=1g --network=3g --rm sitespeedio/browsertime -c 3g --connectivity.engine external --speedIndex --video https://www.sitespeed.io/

删除网络：

bash
#!/bin/bash
echo '停止Docker网络'
docker network rm 3g
docker network rm 3gfast
docker network rm 3gem
docker network rm cable

移动设备测试

Browsertime支持Android上的Chrome：可收集速度指数、HAR和视频！这仍是新功能，如有问题请反馈。

开始前需安装adb并准备设备。

如需限制网络，可使用https://github.com/phuedx/micro-device-lab%E6%88%96https://github.com/WPO-Foundation/tsproxy%E3%80%82

bash
$ browsertime --chrome.android.package com.android.chrome https://www.sitespeed.io --video --speedIndex

在Linux（已测试Ubuntu 16）上，可使用Docker容器驱动Android设备，需注意：

• 使用特权模式--privileged
• 共享USB端口-v /dev/bus/usb:/dev/bus/usb
• 添加-e START_ADB_SERVER=true启动adb服务器
• 关闭xvfb--xvfb false（自动启动）

Docker容器默认支持视频和速度指数分析。

bash
$ docker run --privileged -v /dev/bus/usb:/dev/bus/usb -e START_ADB_SERVER=true --shm-size=1g --rm -v "$(pwd)":/browsertime-results sitespeedio/browsertime -n 1 --chrome.android.package com.android.chrome --xvfb false --speedIndex --video https://en.m.wikipedia.org/wiki/Barack_Obama

配置

运行$ bin/browsertime.js --help查看配置选项。

发送指标到Graphite

最简单的方法是安装https://stedolan.github.io/jq/%E5%B7%A5%E5%85%B7%E6%8F%90%E5%8F%96%E6%8C%87%E6%A0%87%E5%B9%B6%E5%8F%91%E9%80%81%E5%88%B0Graphite%E3%80%82

例如，提取中位数速度指数并发送：

bash
echo "browsertime.your.key.SpeedIndex.median" $(cat /tmp/browsertime/browsertime.json | jq .statistics.visualMetrics.SpeedIndex.median) "`date +%s`" | nc -q0 my.graphite.com 2003