Phantomas的安装和使用

GitHub Logo

基于PhantomJS的模块化网络性能指标收集器。为什么是Phantomas?请参考 因为 🙂

NPM version
Build Status

Download stats

要求

安装

npm install --global phantomas

这将安装PhantomJS的最新版本,并添加一个名为 ‘phantomas’的软连接 (指向 ‘./bin/phantomas.js’) 到系统变量 ‘PATH’中。

你可能需要安装 libfontconfig ,执行命令 sudo apt-get install libfontconfig1

phantomas是用JavaScript编写的,但你可以用不同的语言体验它的好。

Python

pip install phantomas

特性

  • 模块化的方式 – 每个指标是由一个独立的 “module”生成
  • phantomas “core” 作为一个 事件发射器 每个模块可以使用钩子嵌入
  • 深入的指标,如:通过jQuery绑定事件的数量,则调用 ‘window.write’或者 复杂的和重复的CSS选择器 (通过 analyze-css)
  • JSON和CSV作为可用的输出格式与自动报告/监控工具轻松集成
  • 通过TAP格式和断言与持续集成工具集成处理
  • 度量可以通过StatsD发送或存储在elasticsearch
  • 通过CommonJS的模块轻松集成其他nodejs项目 (查看API文档)
  • 可以通过phantomas运行页面 JavaScript代码自定义指标 (感谢 helper functions available in window.__phantomas)
  • 设备配置文件允许phantomas模拟手机或平板电脑 (通过设置适当的user agent和viewport)
  • phantomas可以使用 WebKit (PhantomJS) 或者 Gecko (SlimerJS)引擎 (实验)

贡献者

所有投稿

用法

phantomas可以通过命令行工具和CommonJS模块两种方式 (查看API文档) 应用到你的nodejs项目中。

单次运行

phantomas https://github.com/macbre/phantomas --verbose

你可以度量你的不包含第三方域的网站性能 (但是允许CDN提供静态资源):

phantomas https://github.com/macbre/phantomas --verbose --no-externals --allow-domain .fastly.net

参数

  • –reporter=[json|csv|tap|plain|statsd|elasticsearch] 结果报告的格式 (默认是’plain’)
  • –timeout=[seconds] phantomas运行超时时间 (默认是 15 秒)
  • –viewport=[width]x[height] phantomJS窗口尺寸 (默认1280×1024)
  • –verbose 输出debug信息到控制台
  • –debug 在debug模式下运行PhantomJS
  • –engine 选择用于运行phantomas的内核引擎 ‘[webkit|gecko]’ 实验
  • –colors 强制使用ANSI颜色,即使通过管道输出 (eg. via ‘less -r’)
  • –silent 不在控制台输出任何信息
  • –progress 显示页面加载进度条 (verbose模式不可用)
  • –log=[log file] 将日志写入给定的文件
  • –modules=[moduleOne],[moduleTwo] 只运行选定的模块
  • –include-dirs=[dirOne],[dirTwo] 从指定的目录加载模块
  • –skip-modules=[moduleOne],[moduleTwo] 忽略选择的模块
  • –user-agent=’Custom user agent’ 提供一个自定义的user agent (默认’phantomas/0.6.0 (PhantomJS/1.9.0; linux 64bit)’)
  • –config=[JSON/YAML config file] 使用JSON或YAML格式的配置文件设置参数
  • –cookie=’bar=foo;domain=url’ document.cookie格式设置一个cookie字符串
  • –cookies-file=[JAR file] 指定一个文件名来存储持久的cookie
  • –no-externals 阻止请求第三方域名
  • –allow-domain=[domain],[domain] 允许请求指定的域,白名单
  • –block-domain=[domain],[domain] 禁止请求指定的域,黑名单
  • –auth-user 设置用于HTTP验证的用户名
  • –auth-pass 设置用于HTTP认证的密码
  • –disable-js 禁止页面加载JavaScript
  • –analyze-css 收集深入的CSS指标 实验
  • –film-strip 页面加载时截图 实验
  • –film-strip-dir=[dir path] 截图存放目录 (默认’./filmstrip’ )
  • –film-strip-prefix 截图文件名前缀(默认’screenshot’)
  • –page-source 保存页面源码 实验
  • –page-source-dir=[dir path] 页面源码存放目录 (默认 ‘./html’ ) 实验
  • –assert-[metric-name]=value 断言指标应该小于或等于给定的值
  • –screenshot=[file name] 页面全加载完后截图
  • –har=[file name] 保存HAR信息到指定的文件
  • –wait-for-event=[phantomas event name] 在生成报告之前等待给定的phantomas事件, 超时设置依然有效 (e.g. ‘–wait-for-event “done”’)
  • –wait-for-selector=[CSS selector] 在生成报告之前等待匹配到给定的css选择器,超时设置依然有效 (e.g. ‘–wait-for-selector “body.loaded”’)
  • –stop-at-onload 在 ‘onload’ event事件之后停止phantomas
  • –scroll 当页面加载完后,将滚动条滑到最后
  • –post-load-delay=[seconds] 在生成报告之前等待 X 秒,超时设置依然有效
  • –ignore-ssl-errors忽略ssl错误, 如到期或自签名证书错误
  • –ssl-protocol设置安全连接ssl协议类型 ‘[sslv3|sslv2|tlsv1|any]’
  • –proxy=[host:port]指定代理服务器
  • –proxy-auth=[username:password] 指定代理服务器认证信息
  • –proxy-type=[http|socks5|none] 指定代理服务类型 (默认http)
  • –phone 强制设置为手机模式
  • –tablet 强制设置为平板模式
  • –spy-eval report calls to eval()

多功能运行

只提供 ‘–runs’ 选项:

phantomas https://github.com/macbre/phantomas --verbose --runs 5

在当前的模式下运行仅 ‘plain’ (默认) 和 ‘json’ 格式的报告可生成。

指标

当前指标数: 134

单位:

  • 时间为ms
  • 大小为bytes

请求监控 (核心模块)

由于 PhantomJS 问题 #10156 body size 相关的指标是不可靠的

  • requests: 发出的HTTP请求的总数
  • gzipRequests: gzip压缩的HTTP响应数
  • postRequests: POST请求的数量
  • httpsRequests: HTTPS请求的数量
  • notFound: HTTP数404回应
  • timeToFirstByte: 收到第一个响应的第一个字节所花费的时间 (这不是一个重定向)
  • timeToLastByte: 收到第一个响应的最后一个字节所花费的时间 (这不是一个重定向)
  • bodySize: 所有响应内容的大小
  • contentLength: 所有响应的内容的大小 (基于 ‘Content-Length’ 头)
  • httpTrafficCompleted: 来接收最后HTTP响应的最后字节所花费的时间

AJAX请求

  • ajaxRequests: AJAX请求的数量

资源类型

由于 PhantomJS 问题 #10156 body size 相关的指标是不可靠的

  • htmlCount:HTML响应的数量
  • htmlSize: HTML响应的大小
  • cssCount: CSS响应的数量
  • cssSize: CSS响应的大小
  • jsCount: JS响应的数量
  • jsSize: JS响应的大小
  • jsonCount: JSON响应的数量
  • jsonSize:JSON响应的大小
  • imageCount:图片响应的数量
  • imageSize: 图片响应的大小
  • webfontCount: 网页字体回复数
  • webfontSize: 网页字体大小的反应
  • videoCount: 视频响应的数量
  • videoSize: 视频响应的大小
  • base64Count: base64编码的“响应”的数量 (无HTTP请求实际上发)
  • base64Size: base64编码的“响应”的大小
  • otherCount: 其他响应数
  • otherSize: 其他响应大小

缓存命中

度量是基于由Varnish / Squid服务添加的 ‘Age’ 和’X-Cache’ 头计算

  • cacheHits: 缓存命中数
  • cacheMisses: 缓存未命中数
  • cachePasses: 缓存跳过数

  • headersCount: 请求和响应报头的数量
  • headersSentCount: 在响应中发送的头数
  • headersRecvCount: 在响应中接收的头数
  • headersSize: 所有头的大小
  • headersSentSize: 发送头的大小
  • headersRecvSize:接收头的大小
  • headersBiggerThanContent: 响应头大于响应体的数量

  • domains: 获取页面使用的域的数量
  • maxRequestsPerDomain: 请求数量最多的域
  • medianRequestsPerDomain: 从各个领域获取的平均请求

Cookies

  • cookiesSent: HTTP请求发送的cookie长度
  • cookiesRecv: HTTP请求接收的cookie长度
  • domainsWithCookies: 设置了cookie的域的数量
  • documentCookiesLength: ‘document.cookie’的长度
  • documentCookiesCount: ‘document.cookie’中的cookie数量

DOM 复杂度

下面列出的是完整页面加载后生成的度量

  • globalVariables: JS 全局变量个数
  • globalVariablesFalsy:JS 强制转换为 false 的全局变量的数量
  • bodyHTMLSize: 身体标记内容的大小 (‘document.body.innerHTML.length’)
  • commentsSize:在页面上的 HTML 注释的大小
  • hiddenContentSize:页上的隐藏元素内容的大小 (with CSS ‘display: none’)
  • whiteSpacesSize: 只有空格的文本节点的大小
  • DOMelementsCount: 总的 HTML 元素节点数
  • DOMelementMaxDepth: 嵌套的 HTML 元素节点的最大深度
  • DOMidDuplicated:在 DOM 中找到的重复 Id 数
  • iframesCount:iframe 节点数目
  • nodesWithInlineCSS: 与内联 CSS 样式的节点数 (with ‘style’ attribute)
  • imagesScaledDown:在 HTML 中的’<img>‘节点中有按比例缩小的图像的数量
  • imagesWithoutDimensions: ‘<img>‘节点中没有’width’和’height’属性的数量

DOM 查询数

  • DOMqueries:下面的所有四个指标的总和
  • DOMqueriesWithoutResults: 返回为空的 DOM 查询数
  • DOMqueriesById:’document.getElementById’ 调用次数
  • DOMqueriesByClassName: ‘document.getElementsByClassName’ 调用次数
  • DOMqueriesByTagName: ‘document.getElementsByTagName’ 调用次数
  • DOMqueriesByQuerySelectorAll: ‘document.querySelectorAll’ 调用次数
  • DOMinserts: DOM 节点插入的次数
  • DOMqueriesDuplicated: DOM 查询调用一次以上的数量
  • DOMqueriesAvoidable: 重复使用重复查询的次数

DOM 变化

这些指标只适用于运行 phantomas时使用了 Gecko engine (‘–engine=gecko’)

  • DOMmutationsInserts: 节点插入的次数
  • DOMmutationsRemoves: 删除的节点数
  • DOMmutationsAttributes: DOM 节点属性更改的数目

事件监听

  • eventsBound: ‘EventTarget.addEventListener’ 调用次数
  • eventsDispatched: ‘EventTarget.dispatchEvent’ 调用次数
  • eventsScrollBound:’窗口’ 或 ‘文档’ ‘滚动’ 事件范围数

Window 性能

下面的时间都与 ‘responseEnd’ NavigationTiming (由 ‘timeToLastByte’ 公制表示) 中的条目。见 NavigationTiming 规格 的详细信息。

  • domInteractive: 解析 HTML 并构建 DOM 所花时间
  • domContentLoaded: 要构建 DOM 和 CSSOM,所花的时间,没有样式表阻止 JavaScript 执行 (即 onDOMReady)
  • domContentLoadedEnd: 完成 onDOMReady 事件的处理时间 实验
  • domComplete: 加载页面的所有资源,所花的时间,加载进度停止了转动
  • timeBackend: 加载第一个字节的时间占总加载时间的比例 (%)
  • timeFrontend: 窗口加载时间占总加载时间的比例 (%)

重新渲染

这些指标只适用于运行 phantomas时使用了 Gecko engine (‘–engine=gecko’)

  • repaints: 当前文档重新渲染的数量
  • firstPaint: 第一次渲染所花时间 (时间是相对于’responseEnd’事件)

请求统计

Time 是得到响应后从一开始字节到收到最后一个字节的总持续时间。 Latency 是得到响应后加载第一个字节的时间。
https://developers.google.com/chrome-developer-tools/docs/network

只包括’HTTP 200’的响应

  • smallestResponse: 最小响应的大小
  • biggestResponse: 最大响应的大小
  • fastestResponse: 到最后一个字节的最快的响应时间
  • slowestResponse:到最后一个字节的最慢的响应时间
  • smallestLatency: 到第一个字节的最快的响应时间
  • biggestLatency: 最慢的反应的第一个字节的时间
  • medianResponse: 中间值的最后一个字节的所有响应时间
  • medianLatency: 中值的所有响应的第一个字节的时间

Requests to

  • requestsToFirstPaint: 第一个渲染的HTTP 请求数
  • domainsToFirstPaint: 第一次渲染的域的数量
  • requestsToDomContentLoaded: 多少HTTP 请求数才使页面达到 ‘DomContentLoaded’ 状态
  • domainsToDomContentLoaded: 用来使页面达到 DomContentLoaded 状态的域的数量
  • requestsToDomComplete: 多少HTTP 请求数才使页面达到 ‘DomComplete’ 状态
  • domainsToDomComplete: 用来使页面达到 DomComplete 状态的域的数量

keepAlive

用来监测’Connection: close’ 和 ‘Keep-Alive’

  • closedConnections: 没有保持活跃的连接和下一个请求变慢的请求数量

localStorage

  • localStorageEntries: 本地存储中的条目数

jQuery

需要jQuery 1.8.0+

  • jQueryVersion: jQuery 框架的版本 (如果加载)
  • jQueryVersionsLoaded: 加载 jQuery”实例”的数量(即使在相同的版本)
  • jQueryOnDOMReadyFunctions: 函数绑定到 ‘onDOMReady’ 事件数目
  • jQueryWindowOnLoadFunctions: 函数绑定到 ‘windowOnLoad’ 事件数目
  • jQuerySizzleCalls:对的调用次数 Sizzlejs (包括那些将使用 ‘querySelectorAll’ 解析)
  • jQueryEventTriggers: jQuery 事件触发器的数目
  • jQueryDOMReads: 读取操作 DOM 的数目
  • jQueryDOMWrites: DOM 写操作的数量
  • jQueryDOMWriteReadSwitches: 遵循一系列的写操作的读取操作的数量 (会导致重绘并且可以导致回流焊)

Static assets

  • assetsNotGzipped: 未压缩的静态资源
  • assetsWithQueryString: 请求的查询字符串的静态资源 (URL中包含?foo)
  • assetsWithCookies: 带有 cookie 的请求的静态资源数目
  • smallImages: 图像小于2 KiB大小的可以进行 base64 编码
  • smallCssFiles:CSS 资源小于 2 KiB,可以是内联或合并的数目
  • smallJsFiles: JS 资源小于 2 KiB,可以是内联或合并的数目
  • multipleRequests: 不止一次请求的静态资源数量

缓存

  • cachingNotSpecified: 响应没有缓存标头 (既没有 ‘Cache-Control’ 也没有 ‘Expires’)
  • cachingTooShort: 响应缓存时间太短 (少于一周)
  • cachingDisabled: 缓存禁用的响应 (‘max-age=0’)
  • oldCachingHeaders: 响应太老, HTTP 1.0 的缓存标头 (‘Expires’ 和 ‘Pragma’)

Time to first asset

  • timeToFirstCss: 接收的第一个 CSS 的最后一个字节所需的时间
  • timeToFirstJs: 接收第一 JS 的最后一个字节所需的时间
  • timeToFirstImage: 接收的第一个图像的最后一个字节所需的时间

重定向

  • redirects: HTTP 重定向次数 (either 301, 302 or 303)
  • redirectsTime:发送和接收重定向所花的时间

JavaScript 阻塞

  • documentWriteCalls: ‘document.write’ 或’document.writeln’的调用次数
  • evalCalls: ‘eval ‘ 调用次数(either direct or via ‘setTimeout’ / ‘setInterval’)

JavaScript 错误

Error message and backtrace will be emitted as offenders

  • jsErrors: JavaScript 错误数目

JavaScript 控制台和警报

  • windowAlerts: ‘警告’ 的调用次数
  • windowConfirms: ‘确认’ 的调用次数
  • windowPrompts: ‘提示’ 的调用次数
  • consoleMessages: 对 ‘console.*’ 函数的调用次数

Main request

分析了比特的数据属于只主要的请求

  • statusCodesTrail: 主要的请求,以逗号分隔的 HTTP 状态码列表 (如果主要的要求是一种终端可以包含单个元素)

Document height

Lazy-loadable images

  • lazyLoadableImagesBelowTheFold: 可以懒加载的图片,在折叠状态的数目。

Optional metrics

只有当某些选项传递到 phantomas 发出以下指标

  • blockedRequests: 由于域滤波而被阻塞的请求数目 (仅当配置了 ‘–no-externals’ / ‘–block-domain’ )

CSS metrics

这是一项试验功能. 用’–analyze-css’ 选项启用它。

看一看 analyze-css README 为度量标准的完整列表。

  • cssParsingErrors: 通过 analyze-css分析失败的 CSS (或嵌入式 CSS) 文件数

报告

phantomas提供大量的报告工具,可以格式化成不同的格式.使用 ‘–reporter’ (or ‘-R’ shortcut).

格式化

结果报告可以被格式化为 TAP, CSV 和 JSON格式. ‘plain’ 是默认格式。

参数

格式化程序可以提供带有冒号分隔的选项的列表:

$ phantomas http://foo.net -R csv:no-header:timestamp

这将省略 CSV 标题行和第一列,添加当前时间戳,所以你可以将结果行追加到越来越多的文件。

CSV
  • no-header – 省去CSV 头
  • timestamp – 作为第一列中添加当前时间戳
  • url – 将该 URL 添加的第一列
Elasticsearch
  • <host>:<port>:<index>:<type> – shorthand for ‘–elasticsearch-*’ options
JSON
  • pretty – emits pretty printed JSON
Plain
  • no-color – disable ANSI colors
StatsD
  • <host>:<port>:<prefix> – shorthand for ‘–statsd-host’, ‘–statsd-port’ and ‘–statsd-prefix’ (you don’t need to provide all three options)
TAP
  • no-skip – 不打印出被跳过的度量

StatsD integration

从运行的 phantomas 度量可以直接发送到 StatsD 然后制成图表的使用 graphite, graphene 或您选择的任何其他工具。例如:

$ phantomas http://app.net/start -R statsd --statsd-host stats.app.net --statsd-port 8125 --statsd-prefix 'myApp.mainPage.'

or

$ phantomas http://app.net/start -R statsd:stats.app.net:8125:myApp.mainPage.

will sent metrics to StatsD running on ‘stats.app.net:8125’ and prefix them with ‘myApp.mainPage’.

保存度量到 Elasticsearch

从运行的 phantomas 度量可以直接在 Elasticsearch 输出:

参数
  • –elasticsearch-host=[ip] Elasticsearch instance ip (default : 127.0.0.1)
  • –elasticsearch-port=[port] Elasticsearch instance port (default : 9200)
  • –elasticsearch-index=[index_name] 要使用的索引的名称
  • –elasticsearch-type=[type_name] 要使用的文档类型的名称

或使用报告选项 (‘<host>:<port>:<index>:<type>‘):

$ phantomas http://app.net/start -R elasticsearch:es.app.net::app:phantomas_metrics

Note: as ‘<port>‘ option was skipped a default value will be used (‘9200’).

引擎

可以使用 PhantomJS (WebKit 驱动的无界面浏览器) 或 SlimerJS (基于Gecko的无界面浏览器,使用 xfvb 运行) 运行 phantomas。使用任一 ‘–engine = [webkit|gecko]’ 或 ‘–webkit’/’–gecko’ 要选择一个参数。请注意, 在这点对 SlimerJS 是实验的

PhantomJS

所以需要的库文件都是通过 npm安装.在这里不需要使用任何额外的工作 🙂

SlimerJS

若要使用 SlimerJS 安装以下的 Debian/Ubuntu 软件包:

sudo aptitude install xvfb libasound2 libgtk2.0-0

Custom modules

您可以加载你自己的自定义的 phantomas 模块的使用 ‘–include-dirs’ 选项:

phantomas --include-dirs /my/path/to/custom/modules/ --url http://example.com

‘/my/path/to/custom/modules/’ 目录应包含自定义模块, 每个人在其自己的目录, e.g. ‘/my/path/to/custom/modules/fooBar/fooBar.js’.

“Phantomas的安装和使用”的一个回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注