好用的前端页面性能检测工具—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的时间比较短,目前积累比较少,这次仅做个简单的分享,希望更多前端的小伙伴能够接触并使用该工具,写出高性能的页面。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 安装pip
- Python37不能启动pyspider
- 手写一个抖音视频去水印工具,千万别刚一个程序员
- Scrapy框架: 第一个程序
- Scrapy框架: 基本命令
- Scrapy框架: settings.py设置
- 干货 | Elasticsearch 开发实战常用命令清单
- Scrapy框架: 登录网站
- Scrapy框架: middlewares.py设置
- Scrapy框架: pipelines.py设置
- Scrapy框架: 通用爬虫之CrawlSpider
- Scrapy框架: 通用爬虫之XMLFeedSpider
- Scrapy框架: 通用爬虫之CSVFeedSpider
- Scrapy框架: 通用爬虫之SitemapSpider
- Scrapy框架: 异常错误处理