# @angular/benchpress 中文文档

规范地址：https://npmcn.com/package/%40angular/benchpress/

版本：0\.3\.0
npm 元数据更新时间：2026-04-28T19:50:35.492Z
中文译文更新时间：2026-11-06T04:21:34.688Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40angular/benchpress
原文对照：https://npmcn.com/package/%40angular/benchpress/?lang=original
项目主页：https://github.com/angular/angular/tree/master/packages/compiler-cli
源码仓库：https://github.com/angular/angular

弃用说明：@angular/benchpress has reached End of Life \(EOL\)\. It is no longer maintained and will not receive any further fixes or security patches\.

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：668 kB，56 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：2 个
- 首次发布：2016-09-13T16:45:59.514Z
- 最新版本发布：2022-01-31T21:29:58.724Z
- 近 30 天下载量：40926（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 0 个）

## 中文简介

Benchpress - e2e性能测试的框架

## 安装

```sh
npm install @angular/benchpress
```

也可以使用：`pnpm add @angular/benchpress`、`yarn add @angular/benchpress`、`bun add @angular/benchpress`

## README

# 弹簧

Benchpress是e2e性能测试的一个框架. 见 [这里有一个示例项目](https://github.com/angular/benchpress-tree)。 。 。 .

此套件的来源主要为 [角质](https://github.com/angular/angular) 复发. 请提交问题 和拉请求反对的回波.

许可证:麻省理工学院

# 为什么?

有所谓的"微分基准" 基本上在浏览器中使用一站表来测量时间 (例如通过) `performance.now()`) (中文(简体) ). 这种方法仅限于时间,有时还包括记忆 (Chrome 有特殊旗帜),作为度量. 它不允许衡量:

-   渲染时间:例如浏览器花在布局或油漆元素上的时间。 例如,这可以用来 测试样式表变化的性能影响.
-   垃圾收集:例如浏览器暂停了脚本执行多长时间,收集了多少内存. 它可以用来稳定脚本执行时间,因为垃圾收集时间通常非常长 无法预料 这些数据还可用于衡量和改进应用程序的内存使用, 由于垃圾收集量会直接影响垃圾收集时间.
-   区分脚本执行时间和等待时间: 例如, 仅测量客户端花费的时间 在复杂的用户交互中,忽略后端呼叫.
-   fps 以表示滚动和动画的平滑性.

现代浏览器的DevTools中已经存在这类数据. 但是,没有标准的方法可以 以自动化方式使用这些工具来测量网络应用性能,尤其是不跨平台.

Benchpress试图填补这一空白,即允许以自动化方式访问各种性能度量.

# 如何运作

Benchpress使用webdriver来读取浏览器的所谓"性能日志". 这里面有各种有趣的东西 数据,例如当一个脚本开始/修改执行时,gc开始/修改,浏览器将一些东西画到屏幕上,.

由于浏览器不同,长凳press有使这些事件正常化的插件.

# 特征

-   提供一个循环( 也叫“ Sampler ”) , 多次执行基准
-   自动等待/检测到浏览器为"温暖"
-   记者们为储存结果提供了一个正常的方式:
    -   控制台记者
    -   文件记录员
    -   Google 大查询记者(即将到来)
-   支持微观基准并通过 `console.time()` 编号 : `console.timeEnd()`
    -   `console.time()` 编号 : `console.timeEnd()` 在 DevTools 中标出时间线, 这样才有意义 在微观基准中用它们来直观和理解它们,无论有没有板凳压.
    -   在板凳上运行微观基准 杠杆已经存在的记者, 采样机 和自动热身功能 板凳压.

# 支持的浏览器

-   所有平台的色调
-   移动Safari(iOS)
-   Firefox (工作正在进行)

# 如何写出基准

由测试中的应用程序在长凳上设定基准 和基准驱动器。 测试中的应用程序是 实际应用由html/css/js构成,应当作为测试. 基准驱动程序是一个与 测试中的应用.

## 简单的基准

假设我们想测量脚本执行时间 以及渲染时间 用复杂的 html 字符串填充容器元素.

测试中的应用可能是这样的:

```
index.html:

<button id="reset" onclick="reset()">Reset</button>
<button id="fill" onclick="fill()">fill innerHTML</button>
<div id="container"></div>
<script>
  var container = document.getElementById('container');
  var complexHtmlString = '...'; // TODO

  function reset() { container.innerHTML = ''; }

  function fill() {
    container.innerHTML = complexHtmlString;
  }
</script>
```

一个基准驱动程序可能像这样:

```
// A runner contains the shared configuration
// and can be shared across multiple tests.
var runner = new Runner(...);

driver.get('http://myserver/index.html');

var resetBtn = driver.findElement(By.id('reset'));
var fillBtn = driver.findElement(By.id('fill'));

runner.sample({
  id: 'fillElement',
  // Prepare is optional...
  prepare: () {
    resetBtn.click();
  },
  execute: () {
    fillBtn.click();
    // Note: if fillBtn would use some asynchronous code,
    // we would need to wait here for its end.
  }
});
```

## 浏览器中的测量

如果测试中的应用愿意,它可以自行测量. 举个例子.

```
index.html:

<button id="measure" onclick="measure()">Measure document.createElement</button>
<script>
  function measure() {
    console.time('createElement*10000');
    for (var i=0; i<10000; i++) {
      document.createElement('div');
    }
    console.timeEnd('createElement*10000');
  }
</script>
```

当 `measure` 按钮被点击,它标记了时间表并创建了一万个元素. 它使用特殊的名字 `createElement*10000` 告诉法官 被测量的时间是一万个来创建Element的电话,而这个长椅应该 以平均价计.

一个测试驱动器 看起来像这样:

```
driver.get('.../index.html');

var measureBtn = driver.findElement(By.id('measure'));
runner.sample({
  id: 'createElement test',
  microMetrics: {
    'createElement': 'time to create an element (ms)'
  },
  execute: () {
    measureBtn.click();
  }
});
```

在研究"德夫图斯"时间线时,我们也看到一个标记: ![Marked Timeline](https://npmcn.com/package/%40angular/benchpress/docs/marked_timeline.png)

### 自定义不使用量表 `console.time`

也可以测量浏览器内的任何"用户度量" 通过设置数字值 `window` 对象。 例如:

```js
bootstrap(App)
  .then(() => {
    window.timeToBootstrap = Date.now() - performance.timing.navigationStart;
  });
```

这个用户度量的测试驱动程序可写入如下:

```js

describe('home page load', function() {
  it('should log load time for a 2G connection', done => {
    runner.sample({
      execute: () => {
        browser.get(`http://localhost:8080`);
      },
      userMetrics: {
        timeToBootstrap: 'The time in milliseconds to bootstrap'
      },
      providers: [
        {provide: RegressionSlopeValidator.METRIC, useValue: 'timeToBootstrap'}
      ]
    }).then(done);
  });
});
```

使用这个策略,板凳 将等待到指定的财产名称, `timeToBootstrap` 在这种情况下,定义是: `window` 对象 在测试中的应用程序中.

# 平滑度量仪

Benchpress还可以测量卷轴和动画的"平滑". 为了做到这一点,以下的一套度量衡可以通过板凳平面收集:

-   `frameTime.mean`: 平均帧时间以毫秒计(目标:16.6ms for 60fps)
-   `frameTime.worst`: 最差的帧时间( ms)
-   `frameTime.best`: 最佳帧时间(毫秒)
-   `frameTime.smooth`: 撞击60fps的帧百分比

要收集这些度量衡,需要执行 `console.time('frameCapture')` 财务报告和审定财务报表 `console.timeEnd('frameCapture')` 在您的基准应用程序中,或者通过网络驱动程序在您的基准驱动器中。 以上提到的衡量标准将仅在这两通电话之间收集,建议将时间/时间结束电话尽可能地紧贴在您想要评价的行动周围,以便获得准确的测量.

此外,还需要另外一名供应商通过测试收集这些指标:

```
benchpress.sample(providers: [{provide: bp.Options.CAPTURE_FRAMES, useValue: true}], ... )
```

# 请求量表

Benchpress还可以记录发送的请求数量并计算自此收到的"编码"字节 [窗口。性能.piming.navigation Start](http://www.w3.org/TR/navigation-timing/#dom-performancetiming-navigationstart)数字 :

-   `receivedData`: 自上次导航开始以来收到的字节数
-   `requestCount`: 自上次导航开始以来发出的请求数量

要收集这些指标,您需要以下相应的额外提供者:

```
benchpress.sample(providers: [
  {provide: bp.Options.RECEIVED_DATA, useValue: true},
  {provide: bp.Options.REQUEST_COUNT, useValue: true}
], ... )
```

# 最佳做法

-   使用正常环境
    
    -   取决于执行环境性能的度量标准必须在一个正常的机器上执行
    -   例如,一个真正的移动设备,其cpu频率被设定为固定值.
        -   看我们 [构建脚本](https://github.com/angular/angular/blob/2.4.9/scripts/ci/android_cpu.sh)
        -   这需要 root 访问, 例如通过 Google Nexus 设备上的 Android 的用户调试构建 (见 [这里](https://source.android.com/source/building) 财务报告和审定财务报表 [这里](https://source.android.com/source/building#obtaining-proprietary-binaries)(中文(简体) )
    -   例如,不运行背景工作的校正机,具有固定的cpu频率,.
-   使用相对比较
    
    -   相对比较较不易随时间变化,有助于解释基准结果
    -   例如,将使用ui框架编写的示例与手编码示例进行比较,并跟踪比例
-   承诺后承诺范围
    
    -   运行基准需要一些时间。 在每一次犯罪之前运行它们通常太慢了.
    -   当检测到某一承诺范围的回归时,请使用分节来查找有问题的承诺
-   在新窗口中重复多次基准
    
    -   在新窗口中多次运行相同的基准, 然后取每个基准运行的最低平均值
-   谨慎使用武力gc
    
    -   强迫 gc 可以扭曲脚本执行时间和 gcTime 数字, 但可能需要获得稳定的gc时间/克量数
-   为每次测试打开新窗口
    
    -   浏览器(如chrome)可能会将JIT统计保留在页面重载上,并视之前装入的内容不同而不同地优化页面

# 详细概览

![Overview](https://npmcn.com/package/%40angular/benchpress/docs/overview.png)

定义:

-   有效样本:代表世界的样本,应当以良好方式进行测量.
-   完整样本:迄今收集的所有计量值样本

组件 :

-   运行者
    
    -   包含默认配置
    -   为每个样本调用创建一个新的注射器,通过它创建所有其他组件
-   样本
    
    -   获取测量数据
    -   立即向记者计量数值
    -   循环直到验证器能够从完整的样本中提取出有效的样本(见下文).
    -   向记者报告有效的样本和完整的样本
-   度量衡
    
    -   从浏览器中获取测量值
    -   例如,读取性能日志、 DOM 值、 JavaScript 值
-   验证器
    
    -   从所有测量值的完整样本中提取一个有效的样本.
    -   例如,等待有10个样本并将其作为有效样本(包括取暖时间)
    -   例如,等待计量的回归坡度 `scriptTime` 通过最后10个度量值为%\\0,即: `scriptTime` 度数不再减少
-   记者
    
    -   报告测量值、有效样本和完整样本到后端
    -   例如,向控制台打印的记者,向Google BigQuery报告值的记者,.
-   Web 驱动程序
    
    -   对已使用的网络驱动程序客户端进行抽象
    -   每个网络驱动器客户端执行一次 例如,一个用于硒-webdriver Node.js模块,Dart Async Webdriver,Dart同步网络driver,.
-   Web 驱动程序扩展
    
    -   使用 WebDriverAdapter 执行在 WebDriver 协议中标准化的其他方法
    -   提供强制 gc 等功能,以规范格式读出性能日志
    -   每个浏览器一个执行,例如Chrome一个执行,Safari移动一个执行,Firefox一个执行

## 常见问题

### @angular/benchpress 是什么？

Benchpress - e2e性能测试的框架注意：该包已被作者标记为弃用——@angular/benchpress has reached End of Life \(EOL\)\. It is no longer maintained and will not receive any further fixes or security patches\.

### 如何安装 @angular/benchpress？

在项目目录运行 npm install @angular/benchpress，或使用 pnpm add / yarn add / bun add。

### @angular/benchpress 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @angular/benchpress 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @angular/benchpress 可以商用吗？

@angular/benchpress 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @angular/benchpress 的下载量有多少？

根据 npm 官方下载统计，@angular/benchpress 在 2026/10/06 – 2026/11/04 这 30 天内被下载 40,926 次，日均约 1,364 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @angular/benchpress 还在维护吗？

最新版本 0\.3\.0 发布于 2022/02/01（4 年前）；至今共发布 5 个版本，其中过去 12 个月发布了 0 个；首次发布于 2016/09/14。作者已将其标记为弃用，新项目建议寻找替代方案。