sitespeed.io——前端性能测试搞起来

lsekfe

昨天bug改完了之后，测试小姐姐让我帮她看看sitespeed.io这个前端性能测试工具，小姐姐那么好看，那当然不能拒绝了，搞起来，哈哈哈哈哈！

　　工具简介
　　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;   } };

　　然后，整个网站页面性能就有啦。
　　赶紧去测试下，看看你们家网站的性能吧!

郭小贱

真的是测试小姐姐让你看的吗
不过这代码看起来有点费劲...   背景颜色有点深啊...