2021-08-24

最新推荐文章于 2022-04-27 14:47:23 发布
最新推荐文章于 2022-04-27 14:47:23 发布
阅读量71 收藏
点赞数
分类专栏： 浏览器 工程化 文章标签： 前端
原文链接：https://www.cnblogs.com/wmhuang/p/7620223.html
版权

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

本文简单的介绍了sitespeed.io对web页面的分析结果、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的时间比较短，目前积累比较少，这次仅做个简单的分享，希望更多前端的小伙伴能够接触并使用该工具，写出高性能的页面。

 

分类: web前端

转载地址

丢丢的大神
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2021-11-04
m0_53575762的博客
11-20 5799
一、Linux命令和windows区别？ 1、Linux命令全部严格区分大小写；而windows命令大小写都识别。 2、Linux所有的文件都是没有扩展名的，而windows是文件是有扩展名的。 创建一个新用户 [root@localhost mxh]# useradd mxh2 # 创建一个user [root@localhost mxh]# password mxh2 #12345678 [root@localhost xxx]# gr...
NBA 2021-2022 赛季 阵容（2021.08.24）E--39页.pdf
08-24
NBA 2021-2022 赛季 阵容（2021.08.24）E--39页.pdf
2021-01-08
weixin_45404781的博客
01-08 850
typedef struct tagCOPYDATASTRUCT { DWORD dwData; //用户自定义字段 DWORD cbData; //数据长度 PVOID lpData; //内容指针 } COPYDATASTRUCT;
2021-08-24T02:29:01.282Z 日期格式转换为：2021-08-24 10:29:01
qq_37148353的博客
08-24 1193
const timeDate = 2021-08-24T02:29:01.282Z function rTime(timeDate) { var json_date = new Date(timeDate).toJSON(); return new Date(+new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '') }
2021-08-24 WPF控件专题 ToolBarTray 控件详解
微软MVP Eleven
08-24 3万+
1.ToolBarTray 控件介绍 ToolBarTray使用 ToolBarTray :布局ToolBar的容器、呈放多个ToolBar 位置 索引位置 多个ToolBar，Band 行 BandIndex 带区索引 2.具体案例 <Window x:Class="WpfAppTest.ToolBarTrayWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x.
2021-04-21
qq_56102648的博客
04-21 732
2021-06-08
luquanyou的博客
11-09 2万+
Copyright © 2017-2020, googlehosts members. https://github.com/googlehosts/hosts Last updated: 2020-02-19 This work is licensed under a modified HOSTS License. https://github.com/googlehosts/hosts/raw/master/LICENSE Modified Hosts Start Localhost (DO NOT R
2021-01-15
hikarilee的博客
01-15 1184
git clone 操作出现 fatal:index-pack failed 此错误为当前克隆文件夹属性只读，将只读取消
时间格式转换2021-08-17T16:00:00.000Z存入数据库问题
热门推荐
小石小石摩西摩西
08-18 3万+
项目场景： 前台时间格式 2019-03-09T16:00:00.000Z存入数据库不成功 问题描述： 前台 <el-form-item label="配送时间" prop="estimatedTime"> <el-date-picker v-model="form.estimatedTime" type="datetime" /> </el-form-item>
java处理时间字符串2021-08-04T16:00:00.000Z
zhy的博客
08-05 7735
背景 业务中收到了字符串2021-08-04T16:00:00.000Z，也有可能是2021-08-05，由于不确定性，需要手动转换时间。 直接上代码 public static String interceptTime(String timeStr) { if (!StringUtils.isBlank(timeStr)) { if (timeStr.contains("T")) { DateTimeFormatter df = Da
OpenSSL 缓冲区错误漏洞 (CVE-2021-3712)
qq_35456400的博客
04-27 2623
基本信息 漏洞类型 Linux软件漏洞 威胁等级 高危 CVE编号 CVE-2021-3712 披露时间 2021-08-24 00:00:00 漏洞描述 OpenSSL是Openssl团队的一个开源的能够实现安全套接层（SSLv2/v3）和安全传输层（TLSv1）协议的通用加密库。该产品支持多种加密算法，包括对称密码、哈希算法、安全散列算法等。 openssl 存在缓冲区错误漏洞，该漏洞源于产品假设 ASN.1 字符串使用NULL作为终止符。攻击者可通过制作非NUL
模拟系列之射频：5G时代，射频前端大放异彩[2021-08-24]（55页）.pdf
05-21
模拟系列之射频：5G时代，射频前端大放异彩[2021-08-24]（55页）.pdf
kk 2021-06-08 09-53-24.mp4
06-08
91谷歌视频设置
testDspa2021-01-08.rar
01-08
3轨道24星卫星短路径优先路由算法
Schematic_ADS1256_2021-08-01.pdf
08-12
ADS1256 24位高速ADC检测模块原理图
dis12-bdk24-2021
04-08
2021年信息检索（DIS12和BdK2.4） ...2021-04-08 00组织事项 2021-04-08 01简介与动机 ， 2021-04-13 02-布尔值检索 ，， 2021-04-20 03-TF-IDF ，， 2021-04-27 04-向量空间模型与排名 pdf ，视频
class_narwhal：2021-01-25全栈Python Day班
02-13
20210125-Python-FullStack-Day 从1/25/2021开始的PDX Code Guild Python Full Stack全日制课程的回购 ...练习1-5 实验01-08、11、12、17（您在入门课程中做了这些操作） 实验24-降雨数据实验27-连接四个 学生演讲
人工智能机器学习战略计划-2021.08-24页.pdf
10-03
人工智能机器学习战略计划-2021.08-24页.pdf
tugas-08b-Zahran24:tugas-08b-Zahran24由GitHub Classroom创建
04-18
数据结构实习分配08 资料：教师队列：2021年实习助手名称-NPM 请先阅读说明，直到被理解！任务描述此任务包含一些练习，这些练习使用C ++编程语言中的模板通过链接列表实现优先级队列概念。 创建一个在优先级队列中...
<script> let v = new Vue({ el: '#app', data: { value1: '', value2: '', pickerOptions: { shortcuts: [{ text: '今天', onClick(picker) { picker.$emit('pick', new Date()); } }, { text: '昨天', onClick(picker) { const date = new Date(); date.setTime(date.getTime() - 3600 * 1000 * 24); picker.$emit('pick', date); } }, { text: '一周前', onClick(picker) { const date = new Date(); date.setTime(date.getTime() - 3600 * 1000 * 24 * 7); picker.$emit('pick', date); } }] }, tableData: [ { number: '1', date: '2021-08-01' }, { number: '2', date: '2021-08-01' }, { number: '3', date: '2021-08-01' }, { number: '4', date: '2021-08-01' }, { number: '5', date: '2021-08-01' }, { number: '6', date: '2021-08-01' }, { number: '7', date: '2021-08-01' }, { number: '8', date: '2021-08-01' } ], currentPage1: 5, currentPage2: 5, currentPage3: 5, currentPage4: 4 }, methods: { deleteRow(index, rows) { rows.splice(index, 1); }, handleSizeChange(val) { console.log(每页 ${val} 条); }, handleCurrentChange(val) { console.log(当前页: ${val}); }, }, function toggleContent() { var content = document.getElementById("content"); var btn = document.getElementById("toggle-btn"); if (content.style.height === "100px") { content.style.height = "auto"; btn.innerHTML = "收起"; } else { content.style.height = "100px"; btn.innerHTML = "展开"; } } }); </script>有什么错误
最新发布
06-11
这段代码存在一些语法错误。具体来说： 1. `console.log` 方法中的字符串应该使用引号括起来，例如 `"每页 ${val} 条"` 和 `"当前页: ${val}"`。 2. `toggleContent` 方法应该定义在 `methods` 对象中，并且缺少一个左大括号 `{`。 3. `toggleContent` 方法中的 `console.log` 方法没有使用正确的字符串格式化，应该使用反引号括起来，并在占位符 `${}` 中使用变量名，例如 ``console.log(`当前高度: ${content.style.height}`)``。 4. 在 `v-for` 指令中，应该使用 `v-bind:key` 显式地绑定 `tableData` 数组中每个对象的唯一标识符，例如 `v-for="(item, index) in tableData" v-bind:key="item.number"`。 下面是修正后的代码： ``` <script> let v = new Vue({ el: '#app', data: { value1: '', value2: '', pickerOptions: { shortcuts: [ { text: '今天', onClick(picker) { picker.$emit('pick', new Date()); } }, { text: '昨天', onClick(picker) { const date = new Date(); date.setTime(date.getTime() - 3600 * 1000 * 24); picker.$emit('pick', date); } }, { text: '一周前', onClick(picker) { const date = new Date(); date.setTime(date.getTime() - 3600 * 1000 * 24 * 7); picker.$emit('pick', date); } } ] }, tableData: [ { number: '1', date: '2021-08-01' }, { number: '2', date: '2021-08-01' }, { number: '3', date: '2021-08-01' }, { number: '4', date: '2021-08-01' }, { number: '5', date: '2021-08-01' }, { number: '6', date: '2021-08-01' }, { number: '7', date: '2021-08-01' }, { number: '8', date: '2021-08-01' } ], currentPage1: 5, currentPage2: 5, currentPage3: 5, currentPage4: 4 }, methods: { deleteRow(index, rows) { rows.splice(index, 1); }, handleSizeChange(val) { console.log(`每页 ${val} 条`); }, handleCurrentChange(val) { console.log(`当前页: ${val}`); }, toggleContent() { var content = document.getElementById("content"); var btn = document.getElementById("toggle-btn"); if (content.style.height === "100px") { content.style.height = "auto"; btn.innerHTML = "收起"; } else { content.style.height = "100px"; btn.innerHTML = "展开"; } console.log(`当前高度: ${content.style.height}`); } } }); </script> <table> <thead> <tr> <th>序号</th> <th>日期</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(item, index) in tableData" v-bind:key="item.number"> <td>{{ item.number }}</td> <td>{{ item.date }}</td> <td><button @click="deleteRow(index, tableData)">删除</button></td> </tr> </tbody> </table> <div class="pagination"> <el-pagination background layout="sizes, prev, pager, next, jumper" :current-page.sync="currentPage1" :page-sizes="[5, 10, 20]" :page-size="5" @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="tableData.length" ></el-pagination> </div> <div id="content" style="overflow: hidden; height: 100px;"> 这是一段需要展开的内容。 </div> <button id="toggle-btn" @click="toggleContent">展开</button> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值