利用Docker安裝Web前端性能測試工具Sitespeed.io

1、Sitespeed.io概述 1.Sitespeed.io簡介 2.Sitespeed.io使用場景 2、Sitespeed.io的安裝和使用 1.安裝Sitespeed.io 2.鏈接Docker，驅動瀏覽器進行Web性能測試 1）鏈接Docker 2）驅動瀏覽器進行測試 3）測試報告查看 3、Sitespeed.io測試原理描述

1、Sitespeed.io概述

1.Sitespeed.io簡介

Sitespeed.io：是一款開源的Web性能測試工具，用來衡量Web網站的綜合性能，幫助開發和測試人員分析網頁的加載速度和渲染性能。
Sitespeed.io經過驅動瀏覽器（如：Chrome、Firefox）進行測試，而後從開發者的站點收集多個頁面的數據，並根據最佳實踐等規則來分析這些網頁，而後將結果以HTML報告的形式輸出。javascript

Sitespeed.io知足了一個完整的Web性能測試工具所需的3個關鍵功能：
1）使用真實的瀏覽器測試Web站點，模擬真實的用戶進行請求鏈接，收集以用戶爲中心的重要指標，如：響應速度指標、第一視覺呈現
2）可分析頁面的組成，並給出相應性能反饋，增長終端用戶的使用體驗友好性
3）經過收集和保存頁面組成的數據，便於跟蹤定位css

2.Sitespeed.io使用場景

1）運行於持續集成環境中，將代碼提交or遷入到測試環境時，及早發現Web性能問題，便於提前進行迴歸檢查
2）監控生產環境（正式環境）中的Web性能表現，發現異常及早提醒迴歸java

2、Sitespeed.io的安裝和使用

官網-傳送門：https://www.sitespeed.io/docker

1.安裝Sitespeed.io

Docker安裝完成後，經過如下命令可下載安裝Sitespeed.io所需的組件，以下：shell

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
操做命令：ruby

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-06ssh

3）測試報告查看
綜合評分、性能數據展現：工具

性能優化建議：

頁面概要信息描述：

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格式寫入到磁盤進行存儲爲測試報告