使用 Chrome 和 `--headless` 开关来测量用户页面加载时间

Question

我正在努力提高我的网络服务器的性能，并希望准确衡量用户加载页面所花费的时间。我想象的方式是模拟来自用户的并发请求，并在我微调各种设置以获得最佳结果时跟踪页面加载时间如何变化。

我想使用 Chromium 的最新快照和 --headless 开关来衡量用户加载页面需要多长时间，但由于这是一个相对较新的功能，我不熟悉 all the possible switches，如果有人可以分享他们会运行获得准确结果的内容，我将不胜感激。

我唯一的限制是我无法以其他有助于此类测试的方式注入脚本或修改响应内容。

Answer 1

这似乎还可以。截图显示页面似乎已加载，并且在第一次请求和后续请求之间得到相似的结果，所以我假设缓存确实被禁用了。

time chromium \
  --headless \
  --disk-cache-dir=/dev/null \
  --disable-gpu \
  --download-whole-document \
  --deterministic-fetch \
  https://www.whosebug.com

备注

这不会预热初始请求的 DNS 条目，因此最好丢弃第一个结果
--disable-gpu 标志不是必需的，但是 a reported error 当前版本
打开远程调试端口可能有助于删除对第 3 方来源的引用，这些引用会导致结果发生偏差，或者对被认为是完全加载的页面有更多的控制权，比如等待一些脚本来获取额外的资源，但它是有点过头了

Answer 2

我是 Navalia 的作者，这是对 node/TypeScript 的无头 Chrome 的更高抽象。你可以很容易地用这样的东西来做到这一点：

const Navalia = require('navalia')

const navalia = new Navalia({
  numInstances: 1,
  verbose: true,
})

navalia.startup()

navalia.register(async chrome => {
  const start = Date.now()
  await chrome.navigate('http://www.cnn.com/')
  console.log(`Total time to load page ${Date.now() - start}ms`)
})

如果您还想要更多功能，请随时制作工单。目标之一是消除 Chrome 开关 + CDP 协议带来的痛苦。

使用 Chrome 和 `--headless` 开关来测量用户页面加载时间

Using Chrome with `--headless` switch to measure user page load times

performance

google-chrome

chromium

headless-browser

备注