前端性能测试工具-sitespeed.io安装及使用教程

2022-05-09 21:34:51 浏览数 (1)

开源GitHub地址:https://github.com/sitespeedio/sitespeed.io

安装

终端使用npm安装

代码语言:javascript复制
$ npm i -g sitespeed.io && sitespeed.io https://www.sitespeed.io/

安装失败问题解决

果不其然,逢安装必报错:

代码语言:javascript复制
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 ok

1、Google发现了N多结果,发现我不是一个人,大家统一的说法:更新node版本

2、因为使用的nvm版本管理,配置大于v8.11.1版本 nvm use v10.11.0

3、重新install,尴尬的事儿出现了,仍然报错 一看,发现报错中的仍然显示:

代码语言:javascript复制
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版本后安装成功了

基本使用

满心欢喜的以为能用了吧,果然天真了

代码语言:javascript复制
$ 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版本搞得鬼

代码语言:javascript复制
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 资源文件

0 人点赞