前端性能测试工具-sitespeed.io安装及使用教程
前端性能测试工具-sitespeed.io安装及使用教程
开源GitHub地址：https://github.com/sitespeedio/sitespeed.io
安装
终端使用npm安装
$ npm i -g sitespeed.io && sitespeed.io https://www.sitespeed.io/安装失败问题解决
果不其然，逢安装必报错：
AttributeError: 'NoneType' object has no attribute 'groups'
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:336:16)
gyp ERR! stack at emitTwo (events.js:126:13)
gyp ERR! stack at ChildProcess.emit (events.js:214:7)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:198:12)
gyp ERR! System Darwin 18.0.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /usr/local/lib/node_modules/sitespeed.io/node_modules/sse4_crc32
gyp ERR! node -v v8.11.1
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok1、Google发现了N多结果，发现我不是一个人，大家统一的说法：更新node版本
2、因为使用的nvm版本管理，配置大于v8.11.1版本
nvm use v10.11.0
3、重新install，尴尬的事儿出现了，仍然报错 一看，发现报错中的仍然显示：
gyp ERR! node -v v8.11.1
gyp ERR! node-gyp -v v3.6.2
4、仔细一想，这只能是跟nvm有关了。查看nvm命令，发现有这样一条命令
nvm alias default 0.10.32 Set default node version on a shell
看着这么可疑，那就试试（设置默认node版本）
nvm alias default 10.11.0
5、神奇的事儿发生了，修改npm版本后安装成功了
基本使用
满心欢喜的以为能用了吧，果然天真了
$ sitespeed.io --browsertime.connectivity.engine throttle -c cable https://www.sitespeed.io/
/usr/local/lib/node_modules/sitespeed.io/node_modules/bindings/bindings.js:121
throw e;
^
Error: The module '/usr/local/lib/node_modules/sitespeed.io/node_modules/sharp/build/Release/sharp.node'
was compiled against a different Node.js version using
NODE_MODULE_VERSION 57. This version of Node.js requires
NODE_MODULE_VERSION 64. Please try re-compiling or re-installing
the module (for instance, using `npm rebuild` or `npm install`).
at Object.Module._extensions..node (internal/modules/cjs/loader.js:718:18)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18)
at bindings (/usr/local/lib/node_modules/sitespeed.io/node_modules/bindings/bindings.js:112:48)
at Object.<anonymous> (/usr/local/lib/node_modules/sitespeed.io/node_modules/sharp/lib/constructor.js:10:34)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.<anonymous> (/usr/local/lib/node_modules/sitespeed.io/node_modules/sharp/lib/index.js:3:15)
报错信息里，果然又是node版本搞得鬼
NODE_MODULE_VERSION 57
NODE_MODULE_VERSION 64
查了下：https://nodejs.org/en/download/releases/
NODE_MODULE_VERSION 57，对应的npm版本6(最高对应至npm v6.4.1，node版本是：Node.js 10.2.1）
NODE_MODULE_VERSION 64，对应的node版本10(最高对应值npm版本v6.4.1，node版本是：Node.js 8.16.0)
仔细回想一下，最初安装时使用的npm版本是Node.js 版本为8.1.1（57），虽然切换nvm版本后重新下载了，但应该是没有卸载干净
6、卸载
（1）npm uninstall -g sitespeed.io
（2）删除模板包
/usr/local/lib/node_modules/sitespeed.io
/Users/wangpingyang/node_modules/sitespeed.io
（3）确认默认node版本
nvm alias default 10.11.0
（4）重新安装
npm install sitespeed.io -g
7、开始使用
sitespeed.io https://www.sitespeed.io/
终于可以正常使用
8、测试结果报告样式
测试结果部分参数解释
1、Summary页面
Overall score:Coach的平均综合表现，可访问性和最佳实践得分。
Total size(transfer):传输总页面大小。
Image size(transfer):传输总图片大小。
CSS size(transfer):传输总CSS大小。
Total requests:总请求个数。
Image requests:页面上的图像请求数。
CSS requests:页面上的CSS请求数。
Cache time:缓存时间。
Time since last modification:据上次修改间隔时间。
Page Load Time:页面加载时间。
2、Detail Summary页面：包含最小、最大、平均、90%的请求时间
200 responses:接口返回状态为200的个数
First Paint:首次出现画布时间
ackEndTime:网络和服务器生成并开始发送HTML所需的时间。使用Navigation Timing API收集定义：responseStart - navigationStart
domContentLoadedTime:浏览器解析文档并执行延迟和解析器插入脚本所花费的时间，包括从用户位置到服务器的网络时间。使用Navigation Timing API收集定义：domContentLoadedEventStart - navigationStart
frontEndTime:浏览器解析和创建页面所需的时间。使用Navigation Timing API收集定义：loadEventStart - responseEnd
pageDownloadTime:下载页面需要多长时间（HTML）。使用Navigation Timing API收集定义：responseEnd - responseStart
serverConnectionTime:连接服务器需要多长时间。使用Navigation Timing API收集定义：connectEnd - connectStart
serverResponseTime:服务器发送响应所需的时间。使用Navigation Timing API收集定义：responseEnd - requestStart
3、Toplist （1）占比较大的JavaScript files； （2）占比较大的图片文件 （3）时间较长的请求返回时间。 备注：点击具体链接按钮进入详细信息页面
4、Assets 资源文件