性能测试入门：使用 Playwright 测量关键 Web 性能指标

如果你正在寻找一种现代、可靠的方式来测量网站性能，Playwright 可能正是你需要的工具。虽然它主要以自动化测试闻名，但其强大的性能监控能力却常常被忽视。在这篇文章中，我将分享如何利用 Playwright 来测量那些影响用户体验的关键性能指标。

为什么选择 Playwright 进行性能测试？

你可能会问：“已经有 Lighthouse 和 WebPageTest 这样的专用工具，为什么还要用 Playwright？” 原因很简单：灵活性和集成度。Playwright 允许你将性能测试无缝集成到现有的自动化测试流程中，可以在多种浏览器环境下运行，并且能够模拟真实的用户交互场景。

我最初是在为一个需要登录后才能测试的页面寻找性能监控方案时发现了 Playwright 的这个能力。其他工具难以处理身份验证，而 Playwright 轻松解决了这个问题。

环境搭建与基础配置

首先，确保你已经安装了 Node.js（建议版本 14 或更高）。创建一个新目录并初始化项目：

接下来，创建一个基本脚本文件 performance-test.js：

测量核心 Web 性能指标

1. 页面加载时间

最基本的指标是页面完全加载所需的时间：

但 waitUntil: 'load' 可能不够准确，因为它不一定会等待所有异步内容完成。我通常使用 'networkidle' 选项，它会等待网络活动基本停止：

2. 核心 Web 指标（Core Web Vitals）

Google 提出的核心 Web 指标对用户体验至关重要。通过 Playwright 我们可以测量其中的几项：

最大内容绘制（LCP）

累积布局偏移（CLS）

3. 资源加载分析

了解各个资源的加载性能有助于定位问题：

4. 交互响应时间

对于单页应用（SPA），交互响应时间尤为重要：

实战：完整的性能测试脚本

下面是一个整合了多个指标的完整示例：

<pre data-tool="mdnice编辑器" style="-webkit-tap-highlight-color: transparent; margin: 10px 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px; text-align: left;">const { chromium } = require('playwright');asyncfunctionrunPerformanceTest(url) {const browser = await chromium.launch({ headless: true });const context = await browser.newContext();const page = await context.newPage();console.log(正在测试: ${url}`);// 监听性能指标await page.evaluateOnNewDocument(() => { // 这里可以注入性能监控代码 window.performanceMetrics = { lcp: null, cls: null, fid: null }; });// 导航到页面const startTime = Date.now();await page.goto(url, { waitUntil: 'networkidle' });const navigationTime = Date.now() - startTime;// 等待可能的内容加载await page.waitForTimeout(2000);// 收集性能指标const performanceData = await page.evaluate(() => { // 获取导航计时 const navigation = performance.getEntriesByType('navigation')[0]; // 获取绘制指标 const paintEntries = performance.getEntriesByType('paint'); const fcp = paintEntries.find(entry => entry.name === 'first-contentful-paint'); // 获取LCP const lcpEntries = performance.getEntriesByType('largest-contentful-paint'); const lcp = lcpEntries.length > 0 ? lcpEntries[lcpEntries.length - 1] : null; return { dnsTime: navigation.domainLookupEnd - navigation.domainLookupStart, tcpTime: navigation.connectEnd - navigation.connectStart, ttfb: navigation.responseStart - navigation.requestStart, domContentLoaded: navigation.domContentLoadedEventEnd, loadEvent: navigation.loadEventEnd, fcp: fcp ? fcp.startTime : null, lcp: lcp ? lcp.startTime : null }; });console.log('\n=== 性能测试结果 ===');console.log(`总导航时间:$ {navigationTime}ms);console.log(DNS查询: ${performanceData.dnsTime}ms`);console.log(`TCP连接:$ {performanceData.tcpTime}ms);console.log(首字节时间(TTFB): ${performanceData.ttfb}ms`);console.log(`首次内容绘制(FCP):$ {performanceData.fcp}ms);console.log(最大内容绘制(LCP): ${performanceData.lcp}ms`);console.log(`DOM内容加载:$ {performanceData.domContentLoaded}ms);console.log(页面完全加载: ${performanceData.loadEvent}ms`);// 检查是否达到性能阈值const thresholds = { lcp: 2500, ttfb: 800, fcp: 1800 };console.log('\n=== 性能评估 ===');if (performanceData.lcp > thresholds.lcp) { console.warn(`⚠️ LCP$ {performanceData.lcp}ms 超过阈值 ${thresholds.lcp}ms); } else { console.log(✅ LCP 符合标准); }await browser.close();return performanceData;}// 运行测试runPerformanceTest('https://example.com').catch(console.error);</pre>

进阶技巧与最佳实践

1. 模拟不同网络条件

2. 多次测试取平均值

性能测试结果可能会有波动，多次测试取平均值更加可靠：

3. 生成可视化报告

你可以将结果输出为JSON，然后使用其他工具（如Chart.js）生成可视化报告：

常见问题与解决方案

问题1：性能指标获取不到

如果某些性能指标返回null，可能是因为页面加载太快，性能条目已经被清除。可以尝试在页面加载前就注入性能观察器：

问题2：测试结果不稳定

网络波动、缓存等因素可能导致测试结果不一致。解决方案：

每次测试前清除缓存
多次测试取平均值
在相对稳定的网络环境下运行测试

问题3：需要测试登录后的页面

Playwright 的优势在这里体现：

总结

Playwright 提供了一种灵活且强大的方式来测量网站性能。通过本文介绍的方法，你可以：

测量关键性能指标（LCP、CLS、FCP等）
模拟不同网络条件
集成到现有的测试流程中
生成详细的性能报告

虽然专用的性能测试工具仍然有其价值，但 Playwright 在灵活性和集成度方面的优势使其成为性能监控工具箱中一个值得拥有的补充。最重要的是，你可以使用相同的工具和技术栈来进行功能测试和性能测试，这大大简化了开发工作流程。

开始尝试将这些技术应用到你的项目中吧。你会发现，识别和解决性能瓶颈从未如此简单。记住，性能优化是一个持续的过程，定期监控比一次性测试更有价值。

2025-12-03