好用的前端页面性能检测工具—sitespeed.io

引言

最近在作HTTP2技术相关调研，想确认一下HTTP2在什么情境下性能会比HTTP1.x有显著提高，当我把http2的本地环境（nginx+PHP）部署完成后进行相关测试时，我遇到了如下问题：

（1）平时使用的都是在线分析工具，如google的PageSpeed Insights和GTmetrix，这些工具没法提供线下测试环境；

（2）本身经过chrome dev-tool的Perfomance进行分析，须要手动刷新，并手动记录，须要大量的重复工做，尤为是要控制变量测试的状况；

（3）经过代码打log，即经过performance.timing中记录的TimeEvent时刻计算页面性能指标，指标的完整性和图形化展现仍须要工做量；

（4）可否在真机上测试，如今都是在PC上模拟。

因而就想着可否有一个工具可以调起浏览器，利用浏览器debug面板中的各类数据（请求、事件等）为用户提供页面性能分析结果，最好能图形化或表格展现。检索了一下，发现了 sitespeed.io这个开源工具，基本符合个人预期，这里跟大伙分享一下这个工具。 

 sitespeed.io相关介绍

sitespeed.io的产出

介绍sitespeed.io以前，先看看sitespeed.io的产出。

安装sitespeed.io以后，若是要分析一下百度PC首页性能，执行如下命令：

 

sitespeed.io  -n 5 -v https://www.baidu.com

该命令将会在chrome浏览器下调起URL为https://www.baidu.com 5次，产出了一个分析文件夹，文件夹下载请戳这里：

 

打开index.html文件后，咱们能够看到关于页面性能的相关总结。

 

页面性能总结

 

页面相关意见

 

咱们能够看到该工具围绕：页面性能（Performance）、Web最佳实践（Web Best Practice）和可用性（Accessibility）三个核心指标进行打分，每一个核心指标考核的内容能够在help.html文件中查找。页面中的其余指标，如文件压缩、文件大小、请求数、缓存时间、请求状态码、首次渲染时间、前端渲染用时、页面加载用时、DNS解析时长等，这些指标都有详细的统计，并且不一样等级用相应的颜色表示，基本知足个人诉求。

sitespeed.io的工做原理

sitespeed.io是一个开源工具，旨在检测和提升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插件根据相应的指标进行打分，并提出改进意见。总的来讲，sitespeed.io的工做原理以下图所示。

sitespeed.io工做原理图

因为接触sitespeed.io的时间比较短，目前积累比较少，此次仅作个简单的分享，但愿更多前端的小伙伴可以接触并使用该工具，写出高性能的页面。