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

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

你可能会问：“已经有 Lighthouse 和 WebPageTest 这样的专用工具，为什么还要用 Playwright？” 原因很简单：

。Playwright 允许你将性能测试无缝集成到现有的自动化测试流程中，可以在多种浏览器环境下运行，并且能够模拟真实的用户交互场景。

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

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

mkdir playwright-performancecd playwright-performancenpm init -ynpm install playwright

接下来，创建一个基本脚本文件 

const { chromium } = require('playwright');(async () => {// 启动浏览器，建议使用无头模式以提高性能const browser = await chromium.launch({    headless: true  });const context = await browser.newContext();const page = await context.newPage();// 在这里添加性能测量代码await browser.close();})();

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

// 开始计时const startTime = Date.now();// 导航到目标页面await page.goto('https://example.com', {  waitUntil: 'load'  // 等待页面完全加载});// 计算加载时间const loadTime = Date.now() - startTime;console.log(`页面加载时间: ${loadTime}ms`);

 可能不够准确，因为它不一定会等待所有异步内容完成。我通常使用 

 选项，它会等待网络活动基本停止：

await page.goto('https://example.com', {  waitUntil: 'networkidle'  // 等待网络空闲});

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

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

// 测量LCP（最大内容绘制）const lcp = await page.evaluate(() => {returnnewPromise((resolve) => {    const observer = new PerformanceObserver((entryList) => {      const entries = entryList.getEntries();      const lastEntry = entries[entries.length - 1];      resolve(lastEntry.renderTime || lastEntry.loadTime);    });        observer.observe({ type: 'largest-contentful-paint', buffered: true });        // 如果LCP已经发生，直接获取    const po = performance.getEntriesByType('largest-contentful-paint');    if (po.length > 0) {      resolve(po[po.length - 1].renderTime || po[po.length - 1].loadTime);    }  });});console.log(`LCP: ${lcp}ms`);// 良好标准：小于2.5秒

// 测量CLS（累积布局偏移）const cls = await page.evaluate(() => {let clsValue = 0;const observer = new PerformanceObserver((entryList) => {    for (const entry of entryList.getEntries()) {      if (!entry.hadRecentInput) {        clsValue += entry.value;      }    }  });  observer.observe({ type: 'layout-shift', buffered: true });// 返回最终的CLS值returnnewPromise((resolve) => {    setTimeout(() => {      resolve(clsValue);    }, 5000); // 等待5秒以捕获可能的延迟布局变化  });});console.log(`CLS: ${cls}`);// 良好标准：小于0.1

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

// 获取所有资源的加载时间const resources = await page.evaluate(() => {  const resources = performance.getEntriesByType('resource');  return resources.map(resource => ({    name: resource.name,    duration: resource.duration,    type: resource.initiatorType  }));});// 找出加载最慢的资源const slowestResources = resources.sort((a, b) => b.duration - a.duration).slice(0, 5);console.log('加载最慢的5个资源:', slowestResources);

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

// 测量按钮点击响应时间const button = await page.$('#submit-button');const clickStartTime = Date.now();await button.click();// 等待某个表示交互完成的变化await page.waitForSelector('.success-message', { timeout: 5000 });const clickResponseTime = Date.now() - clickStartTime;console.log(`交互响应时间: ${clickResponseTime}ms`);

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

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);

const { chromium } = require('playwright');asyncfunctiontestWithNetworkConditions(url) {const browser = await chromium.launch();const context = await browser.newContext();// 模拟3G网络const slow3G = {    offline: false,    downloadThroughput: 500 * 1024 / 8, // 500 Kbps    uploadThroughput: 500 * 1024 / 8,    latency: 400  };const page = await context.newPage();// 设置网络节流const client = await context.newCDPSession(page);await client.send('Network.emulateNetworkConditions', slow3G);console.log('正在3G网络条件下测试...');await page.goto(url);await browser.close();}

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

asyncfunctionrunAverageTest(url, iterations = 5) {const results = [];for (let i = 0; i < iterations; i++) {    console.log(`第 ${i + 1}/${iterations} 次测试...`);    const result = await runPerformanceTest(url);    results.push(result);        // 每次测试之间等待一会    if (i < iterations - 1) {      awaitnewPromise(resolve => setTimeout(resolve, 2000));    }  }// 计算平均值const averages = {};const metrics = Object.keys(results[0]);  metrics.forEach(metric => {    const sum = results.reduce((acc, result) => acc + (result[metric] || 0), 0);    averages[metric] = sum / results.length;  });console.log('\n=== 平均性能结果 ===');Object.entries(averages).forEach(([metric, value]) => {    console.log(`${metric}: ${Math.round(value)}ms`);  });return averages;}

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

const fs = require('fs');asyncfunctiongenerateReport(url) {const data = await runPerformanceTest(url);const report = {    timestamp: newDate().toISOString(),    url: url,    metrics: data,    thresholds: {      good: { lcp: 2500, fcp: 1800, cls: 0.1 },      needsImprovement: { lcp: 4000, fcp: 3000, cls: 0.25 }    }  };  fs.writeFileSync(    `performance-report-${Date.now()}.json`,    JSON.stringify(report, null, 2)  );console.log('报告已生成');}

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

await page.evaluateOnNewDocument(() => {  // 在页面任何代码执行前开始监控  const observer = new PerformanceObserver((list) => {    window.lcpEntry = list.getEntries().slice(-1)[0];  });  observer.observe({ type: 'largest-contentful-paint', buffered: true });});

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

const context = await browser.newContext({  bypassCSP: true,  // 禁用缓存  viewport: null});

asyncfunctiontestAuthenticatedPage() {const browser = await chromium.launch();const context = await browser.newContext();const page = await context.newPage();// 先登录await page.goto('https://example.com/login');await page.fill('#username', 'your-username');await page.fill('#password', 'your-password');await page.click('#login-button');await page.waitForNavigation();// 现在测试需要认证的页面console.log('测试已登录状态下的性能...');await runPerformanceTest('https://example.com/dashboard');await browser.close();}

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

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

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

性能测试初学指南:利用 Playwright 探索关键 Web 性能指标

本文介绍了如何利用Playwright进行网站性能测试。通过编写脚本，可以测量页面加载时间、核心Web指标如LCP和CLS，并分析资源加载情况。文章提供了完整的实战代码示例，涵盖了模拟不同网络条件、多次测试取平均值以及生成可视化报告等进阶技巧。这种方法将性能测试与自动化流程无缝集成，帮助团队有效识别和解决性能瓶颈。

编程语言

前端

Playwright是强大的网站性能测试工具，支持测量LCP、CLS等核心指标，能模拟不同网络条件并集成到自动化测试流程。本文详细介绍如何利用Playwright进行页面加载分析、交互响应测试，并提供实战脚本和常见问题解决方案，帮助开发者全面监控网站性能表现。

AI驱动 智领未来

4核4G3M云服务器 新用户低至38元/年！

lighthouse

人脸核身+人脸识别特惠活动0.6折起


faceid

5位重磅专家聚焦 AI 时代开发者核心成长需求，带你深入解锁全栈进化、人机协作关键路径！点击报名到场：<a href="https://cloud.tencent.com/developer/salon/salon-2403/signup" target="_blank">https://cloud.tencent.com/developer/salon/salon-2403/signup</a><br/> 
 <img src="https://qcloudimg.tencent-cloud.cn/raw/487c82639d2338df3ef66dfb1450601a.png"/>

腾讯技术创作特训营「年度论坛」正在报名中！

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

性能测试初学指南:利用 Playwright 探索关键 Web 性能指标

性能测试初学指南:利用 Playwright 探索关键 Web 性能指标

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐