# @condenast/perf-timeline-cli 中文文档

规范地址：https://npmcn.com/package/%40condenast/perf-timeline-cli/

版本：0\.1\.3
npm 元数据更新时间：2026-11-09T20:31:09.785Z
中文译文更新时间：2026-11-10T16:03:38.407Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40condenast/perf-timeline-cli
原文对照：https://npmcn.com/package/%40condenast/perf-timeline-cli/?lang=original
项目主页：https://github.com/CondeNast/perf-timeline-cli#readme
源码仓库：https://github.com/CondeNast/perf-timeline-cli

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

- 包体积（解压后）：36.7 kB，19 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- Node.js 要求：\>=8\.0\.0
- 运行依赖：3 个
- 首次发布：2018-03-26T20:01:51.181Z
- 最新版本发布：2018-04-08T14:13:39.094Z
- 近 30 天下载量：3136（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：4（近 12 个月 0 个）

## 中文简介

通过命令行接口生成 Chrome 性能时间线

## 安装

```sh
npm install @condenast/perf-timeline-cli
```

也可以使用：`pnpm add @condenast/perf-timeline-cli`、`yarn add @condenast/perf-timeline-cli`、`bun add @condenast/perf-timeline-cli`

## README

# Perf 时间线 CLI

生成 Chrome 性能时长的命令行接口 .

[![License](https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat)](https://npmcn.com/package/%40condenast/perf-timeline-cli/LICENSE) ![GitHub package version](https://img.shields.io/github/package-json/v/condenast/perf-timeline-cli.svg) [![Build status](https://travis-ci.org/CondeNast/perf-timeline-cli.svg?branch=master)](https://travis-ci.org/CondeNast/perf-timeline-cli) [![Coverage status](https://coveralls.io/repos/github/CondeNast/perf-timeline-cli/badge.svg?branch=master)](https://coveralls.io/github/CondeNast/perf-timeline-cli?branch=master) ![Dependencies](https://img.shields.io/david/condenast/perf-timeline-cli.svg) ![Dev Dependencies](https://img.shields.io/david/dev/condenast/perf-timeline-cli.svg)

_自豪地建造了:_

[![](https://user-images.githubusercontent.com/1215971/35070721-3f136cdc-fbac-11e7-81b4-e3aa5cc70a17.png "Conde Nast Technology")](https://technology.condenast.com/)

## 演示

生成一个时间表, 看看有多少 [版式](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction) 并使用 [大号](https://github.com/googlearchive/node-big-rig)。 。 。 .

![Command line demo SVG](https://cdn.rawgit.com/CondeNast/perf-timeline-cli/master/.project/perf-timeline.svg)

## 动机

Chrome DevTools 的性能面板是用于创建页面加载时限的行业标准 了解一个网站是如何形成的。 能够点击几个按钮生成一个 时间线, 从命令行创建一个性能时间线, 将功能扩展为适应 不同的工作流程.

在建立这个工具之前,我在从Chrome产生时间表时,遇到了一些问题 DevTools 性能面板.

1.  UI有时缓慢而无反应,特别是在调试CPU使用率高的站点时.
2.  由于一些站点的构造方式,很难获得"干净"的时间表. 如果装入 a 页面,然后点击“启动剖析并重新装入页面”按钮,您的时间表往往包括跟踪 卸下当前页面的事件.
3.  在方案方面不可能产生时间表。 例如,当试图找到 性能回归, 您可能想要为项目的最后 10 个构建创建时间表 . 这项任务需要DevTools内部大量额外的UI步骤.

Perf 时间线试图通过提供快速接口生成来改善开发者的经验 执行时间表.

## 先决条件

Perf Timeline CLI要求节点8+和当前版本的Chrome来查看所生成的时间表.

## 安装

```
npm install -g @condenast/perf-timeline-cli
```

## 使用量

使用默认生成一个性能时长

```
perf-timeline generate https://www.wired.com
```

在拖动网络时生成一个性能时间表

```
perf-timeline generate https://www.wired.com \
  --emulate-network-conditions \
  --latency 150 \
  --upload-throughput 0.75 \
  --download--throughput 1.6
```

拖动 CPU 时生成一个性能时间表

```
perf-timeline generate https://www.wired.com \
  --set-cpu-throttling-rate \
  --rate 4
```

生成带有截图的性能时间表

```
perf-timeline generate https://www.wired.com \
  --screenshots
```

生成一个性能时间表并保存到自定义位置

```
perf-timeline generate https://www.wired.com \
  --path ~/my-timeline.json
```

## 图标

## `generate`

`generate` 为传递到命令的 URL 创建性能时间表 。 时间轴已保存 作为 `trace.json` 在当前目录中。 时间条件可以使用 理由如下.

### 立场

-   `url` (需要;没有默认) - 用于生成性能时间表的 URL

### 启动选项

发射选项传递给 `puppeteer.launch()` 命令。 目前并非所有选项 已支持。 支持的选项如下。 详情请参见 [傀儡 文档](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions)。 。 。 .

-   `--ignore-https-errors` (可选; `false`\- 什么时候 `--ignore-https-errors` 通过, 一个 HTTPS 错误将被忽略 。 这导致Chrome遇到 HTTPS 问题时出现默认错误行为 将被忽略.
-   `--headless` (选项; `true`\- 默认情况下,Perf Timeline CLI运行在"[无头](https://developers.google.com/web/updates/2017/04/headless-chrome)" 模式(即无可见 浏览器 UI. 要看到浏览器在生成时间线时, 请通过 `--headless false` 页:1 `generate` 命令。 请注意: `--no-headless` 是同义词 `--headless false`。 。 。 .

### 网络模拟选项

网络模拟选项允许您在指定的网络下生成一个性能时长 条件。 要启动网络模拟 你必须通过 `--emulate-network-conditions` 旗帜 附加配置选项。 这些选项镜像 Chrome Headless' [`emulateNetworkConditions` 参数](https://chromedevtools.github.io/devtools-protocol/tot/Network#method-emulateNetworkConditions)。 。 。 . 支持所有选项 。 请注意,关于使用CLI案的一些论点已扩充到: 改进产品经验(例如,通过各种参数,我们每秒大位数而不是字节数) 页:1.

-   `--emulate-network-conditions` (可选; `false`\- 确定网络条件 生成时段, 您必须通过 `--emulate-network-conditions` 旗帜。 这个旗帜 允许遵守其他网络模拟选项。 除非 此旗帜已设定 .
-   `--offline` (可选; `false`\- 通过 `--offline` 标记为 `generate` 命令模拟 一个网络断开.
-   `--latency` (可选; `0`\- 发出请求和答复信头之间人工、最小的间隔 收到时以毫秒(毫秒)表示.
-   `--download-throughput` (可选 : `-1`) - 以每秒兆位计的最大下载速度. 说明 Chrome Headless的版本这个参数每秒使用字节. Perf 时间线 CLI 每集使用兆位元 其次,这是比较常见的网络吞吐量衡量标准. `-1` 禁用节奏.
-   `--upload-throughput` (可选 : `-1`) - 每秒最大上传速度以兆位为单位. 说明 Chrome Headless的版本这个参数每秒使用字节. Perf 时间线 CLI 每集使用兆位元 其次,这是比较常见的网络吞吐量衡量标准.`-1` 禁用节奏.
-   `--connection-type` (可选 : `none`\- 所谓基础网络连接的标签 类型。 支持的值在 Chrome Headless 下记录 [`ConnectType` 文档](https://chromedevtools.github.io/devtools-protocol/tot/Network#type-ConnectionType)。 。 。 .

### 设置 CPU 调速率选项

CPU Throttling 速率模拟选项允许您在 指定 CPU 条件。 要启动CPU模拟, 你必须通过 `--set-cpu-throttling-rate` 标记并附加配置选项。 这些选项镜像 Chrome Headless' [`setCPUThrottlingRate` 参数](https://chromedevtools.github.io/devtools-protocol/tot/Emulation#method-setCPUThrottlingRate)。 。 。 . 所有选项都被支持.

-   `--set-cpu-throttling-rate` (可选; `false`\- 确定网络条件 生成时段, 您必须通过 `--set-cpu-throttling-rate` 旗帜。 这个旗帜 允许遵守其他 CPU Throttling 速率选项。 他们会被完全忽略 除非此旗帜已经设定.
-   `--rate` (可选; `1`\- 设置CPU调速率。 数字代表减速 系数(例如,2是“2x”减速).

### 跳转到选项

Goto 选项映射 `page.goto()` 方法从 Puppeteer 的选项。 这些选项允许您 来配置如何处理页面导航。 目前支持所有选项。 注意 `url` 选项 `page.goto` 由 `url`,将位置参数传递给 `generate`。 。 无法在此覆盖此选项 。 见 [`page.goto` 文档](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagegotourl-options) 为了更多 细节.

-   `--timeout` (可选; `30`) - 最多数秒内加载页面直至时间线 生成被停止。 注意, 如果您模仿了网络或CPU, 或者您在稍后设置 `--wait-until` 值,您应当增加 `--timeout` 提高成功的机会 生成时间线 .
-   `--wait-until` (可选; `load`)-导航成功事件. 皮普捷尔"等待直到" 这一事件是为了完成时间表. `load`, (中文(简体) ), `domcontentloaded`, (中文(简体) ), `networkidle0`,以及 `networkidle2` 被支持。 请注意: `--timeout` 优先于 `--wait-until`如果 `--wait-until` 事件在 `--timeout` 时间已到达, 出现错误 将不生成时间表 .

### 追踪选项

追踪选项允许您配置 Pippeteer 的选项 `page.tracing.start()` 方法。 所有选项都被支持. 见 [`page.tracing.start` 文档](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#tracingstartoptions) 为了更多 细节.

-   `--path` (可选; `./trace.json`) - 保存跟踪的文件路径.
-   `--screenshots` (可选; `false`\- 通过 `--screenshots` 旗帜导致Chrome服用 生成时间线时的页面截图 。 这些截图嵌入了追踪中 文件,并在查看性能时显示在 DevTools 中.
-   `--categories` (可选; `[]`) - 时间线中要捕捉的痕量事件类别列表. 此参数作为分类的逗号分隔列表来传递. 如果您愿意, 此选项是有用的 以减少跟踪文件的整体大小。 请注意,仅限于某些类别 在 DevTools 的视图中, 给您留下一个似乎没有任何显示的时间线 表现面板。 查看可能的类别的最佳方式是查看原始的踪迹并寻找 页:1 `cat` 事件价值.

## 谢谢

这个项目建立在巨人的肩上. 这只是一个方便包装器 围绕一些非常令人振奋的项目,包括:

-   [傀儡](https://github.com/GoogleChrome/puppeteer)
-   [无色头](https://developers.google.com/web/updates/2017/04/headless-chrome)
-   [色调 DevTools](https://github.com/ChromeDevTools/devtools-frontend)
-   [驴子](https://github.com/yargs/yargs)

## 贡献者

见 [捐助者](https://github.com/CondeNast/perf-timeline/contributors) 谁 参与编写这一工具.

## 常见问题

### @condenast/perf-timeline-cli 是什么？

通过命令行接口生成 Chrome 性能时间线

### 如何安装 @condenast/perf-timeline-cli？

在项目目录运行 npm install @condenast/perf-timeline-cli，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 perf-timeline，可以用 npx perf-timeline 直接运行。

### @condenast/perf-timeline-cli 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/condenast\_\_perf-timeline-cli 是否存在。

### @condenast/perf-timeline-cli 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @condenast/perf-timeline-cli 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=8\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @condenast/perf-timeline-cli 可以商用吗？

@condenast/perf-timeline-cli 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @condenast/perf-timeline-cli 的下载量有多少？

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

### @condenast/perf-timeline-cli 还在维护吗？

最新版本 0\.1\.3 发布于 2018/04/08（8 年前）；至今共发布 4 个版本，其中过去 12 个月发布了 0 个；首次发布于 2018/03/27。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。