工具简介
sitespeed.io 是 Jonathan Lee 发布的一款可监视和衡量网站前端性能的开源工具,可帮助您根据coach的性能最佳实践建议,使用导航计时API、用户计时和可视化指标(FirstVisualChange、SpeedIndex和LastVisualChange)收集浏览器指标,帮助您监控、分析和优化网站速度和性能。
优势
·开源(可以本地部署以满足内网测试要求)
·支持事务模拟(可以通过它提供的api模拟登录,点击事件等操作)
·自动性能分析(满足线上监控)
·可以多浏览器测试
工作原理
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插件根据相应的指标进行打分,并提出改进意见!
如何使用
关于如何使用官网提供了两种方式,一种是使用Docker,一种是npm,官网又说,如果你使用npm的话,你就可以在浏览器窗口中看到发生了什么。或者如果你使用Docker,你可以添加browsertime. videparameters .debug当你录制视频。这样你就可以获得所有脚本的完整视频(但没有视觉指标)!这样的话,当然选择npm了,哈哈哈哈!
当然你也可以使用Docker。
Docker
docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:17.2.0 https://www.sitespeed.io/ |
npm
安装
npm install -g sitespeed.io |
使用
sitespeed.io https://www.sitespeed.io/ -b chrome |
执行命令之后,你会发现,它打开了三次www.sitespeed.io 这个网站,这是因为它默认会执行三次, 你也可以自己定义语句让它执行一次,如下:
sitespeed.io -n 1 -v https://www.baidu.com |
执行完毕之后,它会给你生成一个报告,会告诉你报告的地址下图红框内是报告的地址:
我们找到这个地址就可以看到报告啦,点击index.html,你就能看到一个完整的报告!如下:
你以为这样就完事了,当然没有,实际工作中,哪有这样简单,都是需要登录的好不好!咋整?sitespeed.io支持你自己写代码,麻溜的写起来,以登录为例!
首先,你得新建一个 login1.js文件,然后,写起来:
module.exports = async function (context, commands) { // 括号写你要测试的网站地址 await commands.navigate("https://a.b.com/"); try { // 登录你要测试的网站,用户名007,密码123456, //await commands.addText.byId('login', 'wpName1'); //await commands.addText.byId('password', 'wpPassword1'); //上面两行是官网给的例子,由于很多情况我们并不知道元素的id,所以我用了byXpath,实际使用中,请替换为自己网站登录框的Xpath await commands.addText.byXpath("007",'//input[@name="username"]'); await commands.addText.byXpath("123456", '//input[@type="password"]'); //截个图,截图名称取为1,当然也可以不截图 await commands.screenshot.take("1"); await commands.measure.start("login"); //这里是点击登录按钮,同样用的byXpath await commands.click.byXpath( '//*[@id="root"]/main/section[2]/div/div[1]/div/div[4]/button' ); //又截了个图,可以不要 await commands.screenshot.take("2"); //等待了5秒,可以不要 await commands.wait.byTime(5000); //打个日志,日志可以在命令行里面看到 context.log.info("我是一般日志"); context.log.error("我是错误日志"); // Stop and collect the metrics return await commands.measure.stop(); } catch (e) { // We try/catch so we will catch if the the input fields can't be found // The error is automatically logged in Browsertime an rethrown here // We could have an alternative flow ... // else we can just let it cascade since it caught later on and reported in // the HTML throw e; } }; |
代码准备完毕啦,接下来,我们把这个js放到跟sitespeed-result这个文件夹同级的目录里,我的sitespeed-result文件夹就在桌面,所以我就把 login1.js放桌面啦!
然后,命令执行起来:
sitespeed.io -n 1 -v login1.js --multi |
然后,你会发现sitespeed会帮你打开你要测试的网站,然后自动帮你写入用户名和密码,完成登录,最后生成一个报告!
当然,这还没完,登录完成之后,我们还想,点击每个页面,看看每个页面的性能,所以,我们这样写:
module.exports = async function (context, commands) { // 括号写你要测试的网站地址 await commands.navigate("https://a.b.com/"); try { // 登录你要测试的网站,用户名007,密码123456, //await commands.addText.byId('login', 'wpName1'); //await commands.addText.byId('password', 'wpPassword1'); //上面两行是官网给的例子,由于很多情况我们并不知道元素的id,所以我用了byXpath,实际使用中,请替换为自己网站登录框的Xpath await commands.addText.byXpath("007",'//input[@name="username"]'); await commands.addText.byXpath("123456", '//input[@type="password"]'); //截个图,截图名称取为1,当然也可以不截图 await commands.screenshot.take("1"); await commands.measure.start("login"); //这里是点击登录按钮,同样用的byXpath await commands.click.byXpath( '//*[@id="root"]/main/section[2]/div/div[1]/div/div[4]/button' ); //又截了个图,可以不要 await commands.screenshot.take("2"); //等待了5秒,可以不要 await commands.wait.byTime(5000); //打个日志,日志可以在命令行里面看到 context.log.info("我是一般日志"); context.log.error("我是错误日志"); // Stop and collect the metrics await commands.measure.stop(); //再打开一个页面 await commands.measure.start( 'https://a.b.com/recommend/fields' ); //等待了4秒 await commands.wait.byTime(4000); //再打开一个页面 await commands.measure.start( 'https://a.b.com/marketingCenter/officialAccounts/fans' ); await commands.wait.byTime(4000); return commands.measure.start('https://a.b.com/loyaltyprogram/memberInsight/list'); } catch (e) { // We try/catch so we will catch if the the input fields can't be found // The error is automatically logged in Browsertime an rethrown here // We could have an alternative flow ... // else we can just let it cascade since it caught later on and reported in // the HTML throw e; } }; |
然后,整个网站页面性能就有啦。
赶紧去测试下,看看你们家网站的性能吧!
本文内容不用于商业目的,如涉及知识产权问题,请权利人联系51Testing小编(021-64471599-8017),我们将立即处理