如何在Linux/Mac命令行测量包含JS执行的网页加载时长

你需要使用支持JS执行的无头浏览器工具来模拟真实浏览器的加载行为，才能拿到包含JS执行、异步请求处理的完整加载时长，以下是可直接落地的方案：

方案1：Playwright无头模式（推荐，兼容性最高） #

Playwright是微软开源的无头浏览器控制工具，原生支持Linux/Mac系统，能1:1还原Chrome/Edge等浏览器的加载逻辑，自定义加载判定规则。

• 安装步骤：
  1. 先安装Node.js运行环境
  2. 全局安装Playwright：npm install -g playwright
  3. 安装配套Chromium内核：playwright install chromium
• 测量脚本示例（新建measure-load.js文件）：

const { chromium } = require('playwright');

(async () => {
  // 启动无头浏览器
  const browser = await chromium.launch({ headless: 'new' });
  const page = await browser.newPage();
  const startTime = Date.now();
  // 加载页面，waitUntil设为networkidle表示等待500ms无新网络请求时判定为加载完成，更贴合用户实际感知
  await page.goto('替换为你的内部网页URL', { waitUntil: 'networkidle' });
  const fullLoadTime = Date.now() - startTime;
  console.log(`页面完整加载时长（含JS执行）：${fullLoadTime}ms`);
  // 可额外获取浏览器原生性能指标，比如JS执行耗时、DOM渲染耗时等
  const perfTiming = await page.evaluate(() => window.performance.timing);
  console.log(`JS执行耗时：${perfTiming.domComplete - perfTiming.domLoading}ms`);
  await browser.close();
})();

• 运行命令：node measure-load.js

方案2：Puppeteer无头模式 #

Puppeteer是谷歌开源的Chrome控制工具，用法和Playwright类似，生态更成熟：

• 安装命令：npm install -g puppeteer
• 测量脚本示例（新建puppeteer-measure.js）：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();
  const startTime = Date.now();
  await page.goto('替换为你的内部网页URL', { waitUntil: 'networkidle2' });
  const fullLoadTime = Date.now() - startTime;
  console.log(`页面完整加载时长：${fullLoadTime}ms`);
  await browser.close();
})();

• 运行命令：node puppeteer-measure.js

方案3：轻量命令行工具（无需写JS脚本） #

如果不需要自定义指标采集，可以直接用封装好的无头浏览器工具快速测量：

• 安装wkhtmltopdf工具：
  • Mac端：brew install wkhtmltopdf
  • Linux端：sudo apt install wkhtmltopdf
• 测量命令：time wkhtmltoimage --javascript-delay 2000 '替换为你的内部网页URL' /dev/null
  其中--javascript-delay 2000表示页面基础加载完成后额外等待2000ms让JS执行完毕，适合JS逻辑固定的页面场景。

注意事项 #

• 内部网页如果需要鉴权，可以在无头浏览器脚本中添加请求头、Cookie、甚至模拟登录操作，逻辑和真实浏览器操作完全一致
• 可以根据业务需求调整waitUntil参数：load表示触发页面load事件时判定完成，domcontentloaded表示DOM树解析完成时判定完成

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