如何用WebDriver Sampler测试Time-to-Interactive及页面性能指标相关疑问

关于WebDriver Sampler默认「load time」的说明 #

WebDriver Sampler默认的load time对应的是整页加载完成时间，即浏览器触发onload事件的时间点，此时页面所有资源（图片、样式、脚本等）均已加载完毕，对应浏览器性能指标里的load事件时间。

实现TTI与整页加载指标采集的方法 #

完全可以通过WebDriver Sampler结合JavaScript代码实现这两个指标的采集，具体操作如下：

1. 采集整页加载时间 #

除了默认的load time，也可通过JavaScript主动获取更精准的整页加载时间，在WebDriver Sampler中添加以下代码：

var performance = WDS.browser.executeScript("return window.performance.timing");
var pageLoadTime = performance.loadEventEnd - performance.navigationStart;
WDS.sampleResult.setResponseData("整页加载时间: " + pageLoadTime + "ms");
WDS.sampleResult.addKeyValue("整页加载时间(ms)", pageLoadTime);

这段代码通过浏览器performance.timing API计算从导航开始到load事件结束的时间差，逻辑和默认load time一致，但可自定义存储到采样结果中。

2. 采集Time-to-Interactive（TTI） #

TTI指页面达到完全可交互状态的时间，需借助浏览器PerformanceObserver监听相关指标，在WebDriver Sampler中添加以下代码：

var tti = WDS.browser.executeScript(function() {
  return new Promise(resolve => {
    if ('PerformanceObserver' in window) {
      const observer = new PerformanceObserver((list) => {
        for (const entry of list.getEntries()) {
          if (entry.name === 'interactive') {
            resolve(entry.startTime);
            observer.disconnect();
          }
        }
      });
      observer.observe({ entryTypes: ['measure'] });
      performance.measure('interactive');
    } else {
      // 兼容旧浏览器，用domInteractive时间近似TTI
      resolve(window.performance.timing.domInteractive - window.performance.timing.navigationStart);
    }
  });
});
WDS.sampleResult.setResponseData("Time-to-Interactive: " + tti + "ms");
WDS.sampleResult.addKeyValue("Time-to-Interactive(ms)", tti);

代码通过PerformanceObserver监听interactive类型性能条目获取精准TTI值；对不支持该API的浏览器，用domInteractive时间近似替代。

3. 查看采集到的指标 #

上述代码通过WDS.sampleResult.addKeyValue()将指标添加到采样结果的自定义字段中，你可在JMeter的「查看结果树」「聚合报告」中查看数据，也可将其写入CSV文件用于后续分析。

内容的提问来源于stack exchange，提问作者Roman Chovgun