berserkJS —— 前端网络(性能)监测工具

简介:
+关注继续查看

berserkJS 详细介绍
berserkJS 是基于 Qt (C++跨平台库)开发的前端网络(性能)监测工具。 它的核心功能是通过内置 webkit 收集由页面实际网络请求相关数据。 偏重于页面上线前检测与评估。

页面性能分析工具,可用 JS 编写自己的检测、分析规则。 基于 Qt 开发,可跨平台编译,部署。内置基于 QtWebkit 的浏览器环境。 源码需在目标系统中编译后,可产生运行于 Windows / Linux / Mac 系统的可执行文件。 工程中自带 Window 系统中动态编译的可执行文件,此文件位于 bulid 目录下。

image

使用案例

  • 无界面浏览器测试:在不依赖本地任何浏览器的情况下,运行测试框架,如 QUnit,Capybara, QUnit, Mocha, WebDriver, YUI Test, BusterJS, FuncUnit, Robot Framework 等。
  • 页面自动化:可以无障碍访问和操作网页的标准 DOM API 以及页面所用 JS 变量、对象、属性等内容。
  • 屏幕捕获:以编程方式获取网页全部或部分内容,可根据 Selector 截取指定 DOM 元素渲染情况;包括 CSS,SVG 和 Canvas。可将截取图片 base64 化,以便发送给远端服务器保存。
  • 网络监控:自动化的网络性能监控,跟踪页面所有资源加载情况并可简便的将输出结果格式化为标准HAR格式。
  • 页面性能监控:自动化的页面渲染监控,可获取 CPU、 内存使用情况数据,根据页面整体情况可简便的输出首次渲染时间、首屏渲染时间等关键数据。

工具特性

  • 跨平台性:基于 Qt 开发,可跨平台编译,部署。内置基于 QtWebkit 的浏览器环境。源码需在目标系统中编译后,可产生运行于 Windows / Linux / Mac 系统的可执行文件。
  • 功能性:工具内置 webkit 浏览器内核,可响应浏览器内核事件回调、支持发送鼠标消息给浏览器、包装浏览器网络请求数据为JS数据格式、可与浏览器内JS做数据交互。
  • 开放性:工具将主要操作均包装为JS语法与数据格式,采用JS语法包装,前端工程师可根据API组装出符合各自预期的检测功能。
  • 接口性:工具本身支持命令行参数,可带参调用。API支持处理外部进程读取输出流、支持HTTP发送数据。可由 WEB 程序远程调用后获取测试的返回结果。
  • 标准性:完全真实的浏览器环境内 DOM,CSS,JavaScript,Canvas,SVG 可供使用,绝无仿真模拟。

特点差异

与 PhantomJS 相比具有以下不同:

  • API 简易: 更直接的 API,如获取网络性能数据,仅需 3 行代码,而非 PhantomJS 的几十行,且信息量比 PhantomJS 丰富。
  • API 标准化: 常用 API 均采用 W3 规范标准命名,事件处理代码可重复绑定而不相互覆盖,可以无缝兼容 Wind.JS 等异步流程处理库来解决自动化时异步流程控制问题。
  • 页面性能信息丰富:具有页面渲染和 CPU、 内存使用情况数据获取能力,可输出首次渲染时间、首屏渲染时间等页面性能关键数据。
  • 调试便利: 具有 GUI 界面与命令行状态两种形式,开发调试期可使用 GUI 模式定位问题,此模式中可开启 WebKit 的 Inspector 工具辅助调试页面代码与 DOM 。实际运行时可开启命令行状态避免自动执行时 GUI 界面干扰。

应用企业

  • 新浪微博:已使用 berserkJS 构建前端性能监测数据分析平台,防止微博主要产品在不停开发迭代时,页面性能产生退化。
  • Cisco: 用于 WebEx 项目的自动化测试
相关文章
|
8天前
|
弹性计算 JavaScript 前端开发
前端开发基础6:Node.js和LESS预编译工具
本实验将介绍如何通过Node.js进行前端预编译。
19 1
|
1月前
|
前端开发 JavaScript UED
Axios网络请求:前端数据交互的强大工具
本篇深入介绍了Axios网络请求库的使用,涵盖了基本的GET和POST请求、拦截器的应用、并发请求的处理以及取消请求的方法。通过详细的代码示例,读者可以了解如何在前端应用中使用Axios进行数据交互,实现高效、可靠的网络请求,从而提升应用性能和用户体验。无论是单一请求还是多个请求的并发处理,Axios都展现了强大的功能,为前端开发者提供了一种优秀的解决方案。
38 0
|
1月前
|
前端开发
前端项目实战拾叁-连接postgrest的工具建议使用DBeaver
前端项目实战拾叁-连接postgrest的工具建议使用DBeaver
26 0
前端项目实战拾叁-连接postgrest的工具建议使用DBeaver
|
1月前
|
SQL 前端开发
前端项目实战伍拾贰​react-admin+material ui-踩坑-能用工具创建表别用sql
前端项目实战伍拾贰​react-admin+material ui-踩坑-能用工具创建表别用sql
21 0
|
1月前
|
数据可视化 前端开发 JavaScript
前端数据可视化的工具和库
前端数据可视化的工具和库
|
2月前
|
监控 前端开发 测试技术
前端工程化的前端性能的性能测试/监控工具之Performance工具
Performance 工具是一个非常强大的前端性能测试工具,因为它可以在不同的设备和浏览器上测试和监控网页的性能,从而帮助开发者了解网页的实际性能表现。
124 0
|
3月前
|
前端开发 JavaScript 测试技术
从0搭建Vue3组件库(六):前端流程化控制工具gulp的使用
从0搭建Vue3组件库(六):前端流程化控制工具gulp的使用
57 0
|
3月前
|
前端开发 JavaScript 开发者
前端工程化的CSS预处理工具之Stylus
Stylus是一个非常流行的前端工程化打包工具,它可以帮助开发者快速构建具有可重用性和可维护性的前端项目,并且提供了完善的样式规则和自动化处理机制。
45 1
|
3月前
|
前端开发 JavaScript 开发者
前端工程化的CSS预处理工具之PostCSS
PostCSS是一个非常流行的前端工程化打包工具,它可以帮助开发者快速构建具有可重用性和可维护性的前端项目,并且提供了完善的样式规则和自动化处理机制。
42 3
|
3月前
|
前端开发 JavaScript 开发者
前端工程化的CSS预处理工具之Less
Less是一个非常流行的前端工程化打包工具,它可以帮助开发者快速构建具有可重用性和可维护性的前端项目,并且提供了完善的样式规则和自动化处理机制。
42 1
相关产品
云迁移中心
推荐文章
更多