使用 Google 的“tachometer”来衡量 Discourse 中 JS 性能的变化

文档 开发者指南
1

当在 Discourse 核心/插件/主题中进行客户端工作时，考虑性能影响非常重要。谷歌的“Tachometer”项目提供了一个统计上严谨的基准测试工具，我们可以用它来明确衡量更改带来的影响。

本质上，这个工具会以“轮询”方式加载一系列 URL。对于每次页面加载，它都会进行一些性能测量。在数百/数千次迭代后，它会生成一个比较表。

这种“轮询”方法的优点在于它有助于减少外部因素对测量的影响。

步骤 1：添加 performance.measure()

这里的方法将根据您测试的内容而有所不同。但根本上：您需要在 Tachometer 读取的地方引入一个 performance.measure() 值。

如果您想衡量 Discourse 启动和渲染所需的时间，您可以使用内置的“discourse-init-to-paint”测量值。对于任何其他内容，您可以引入自己的 performance.measure 并使用它。

您可以使用浏览器开发者工具中的“性能”选项卡来检查它是否正常工作：

SCR-20240529-rlhj
SCR-20240529-rlhj1234×176 9.92 KB

如果您试图测量需要用户交互的活动（例如打开菜单），您可以通过在初始化程序中添加类似以下内容来实现，该代码在页面加载 1 秒后单击按钮：

setTimeout(() => document.querySelector(".my-button").click(), 1000);

步骤 2：确定用于测试的 URL

首先，确保您是以生产模式构建 Ember 资产。这可以通过使用 EMBER_ENV=production 启动服务器来实现。

要获得两个不同的 URL，主要有两种方法：

如果您的更改小到可以轻松地通过功能标志控制，那么您可以添加逻辑以根据 URL 查询参数 来切换它。然后您的两个 URL 可以是

http://localhost:4200?flag=before
http://localhost:4200?flag=after

如果更改太大而无法实现，您可以将 Discourse 克隆到第二个目录并启动 第二份 ember-cli 副本。可以使用类似以下命令将其代理到同一个 Rails 服务器：

EMBER_ENV=production pnpm ember serve --port 4201 --proxy http://localhost:3000

然后您的两个 URL 将是

http://localhost:4200
http://localhost:4201

如果您采用此方法，请确保应用程序的两个副本都具有本指南第 1 步中引入的性能遥测数据

步骤 3：配置 Tachometer

这是我的 bench.json 文件，它将对每个目标进行 300 次采样：

{
  "timeout": 5,
  "sampleSize": 300,
  "benchmarks": [
    {
      "measurement": {
        "mode": "performance",
        "entryName": "discourse-init-to-paint"
      },
      "expand": [
        {
          "url": "http://localhost:4200",
          "name": "before"
        },
        {
          "url": "http://localhost:4201",
          "name": "after"
        }
      ]
    }
  ]
}

步骤 4：运行基准测试

为了减少噪声，请停止工作站上任何不相关的活动，然后使用类似以下的命令启动基准测试：

npx tachometer@latest --config ./bench.json

完成后，您应该会看到前后性能的比较。

image
image1500×412 98.9 KB

局限性

与任何此类实验一样，值得考虑其局限性。例如：

  • 开发工作站上的性能差异可能无法直接映射到其他浏览器/设备

  • Discourse 通过 Ember-CLI 代理的启动过程与生产环境中的过程并不完全相同。在进行结构性更改（例如框架更新）时，这一点可能很重要

  • 性能通常取决于应用程序状态（例如渲染的主题数量），因此您的结果在其他环境中可能无法完全重现

此文档已版本控制 - 在 github 上建议更改。

17 个赞