一、为什么要做前端性能测试

很多前端开发者可能都遇到过这样的情况：改完代码上线后，突然收到用户反馈页面打开变慢了，或者自己本地测试时没发现问题，上线后性能拉胯导致用户流失。前端性能直接影响用户留存率，尤其是电商、资讯类网站，加载慢1秒，转化率可能就掉好几个百分点。所以，一套能覆盖全面的性能测试方法，是每个前端开发者必备的技能。

而Playwright就是目前前端圈里非常好用的工具，它是微软开发的自动化测试工具，不仅能做UI功能测试，还能轻松抓取各种性能数据，支持Chrome、Firefox、Safari几乎所有主流浏览器，还能模拟手机、平板等设备，甚至可以调整网络速度，完全满足全面性能测试的需求。

1.1 常见的性能痛点

比如页面加载总时间太长、图片没压缩导致资源过大、弱网下页面卡到动不了、新功能上线后性能突然下降（也就是性能回归），这些都是前端性能测试要解决的问题。用手动的方式去测，不仅效率低，而且容易出错，Playwright可以帮我们把这些测试自动化，一次编写，多次运行，非常省心。

1.2 Playwright做性能测试的优势

和其他工具比，Playwright的优势很明显：第一，不需要复杂的环境，只要会Node.js就能用；第二，能拿到非常全的性能数据，从首屏时间到每个网络请求的细节，都能一键拿到；第三，支持各种场景，不管是桌面浏览器还是移动端，不管是正常网络还是弱网，都能模拟；第四，跨浏览器，不用分别写Chrome、Safari的测试脚本，一次脚本适配所有主流浏览器。

二、Playwright基础准备

要想用Playwright做性能测试，第一步就是搭建环境，对于不同基础的开发者，这部分尽量简化，不用太复杂的配置。

2.1 环境搭建（完整步骤）

首先，你需要先安装Node.js，官网下载对应系统的稳定版本就行，安装的时候记得勾选“自动添加到环境变量”，这样在终端里能直接用Node和npm命令。

接下来，创建一个测试文件夹，打开终端进入这个文件夹，然后执行以下命令：

# 初始化项目，会生成package.json文件
npm init -y
# 安装Playwright核心库，同时会自动安装Chrome、Firefox、Safari这些浏览器
npm install playwright

安装完成后，就可以写第一个性能测试脚本了，非常简单，不用额外配置。

2.2 核心工具初步理解

在写脚本之前，先了解两个关键的东西，不用记太复杂的名词，知道用途就行： 第一个是page.metrics()，这是Playwright自带的API，能直接返回页面的各种性能指标，就像你在Chrome开发者工具里看的Performance面板的核心数据； 第二个是HAR文件，简单说就是把页面加载时所有的网络请求、资源下载的详细信息存成一个文件，后面可以用Chrome开发者工具导入这个文件，更详细地分析每个资源的加载情况。

三、全面性能测试的具体操作

这部分是核心，我们会写几个完整的脚本，覆盖基础性能指标、进阶数据收集、弱网测试，每个脚本都带详细注释，运行就能出结果。

3.1 基础性能指标获取

这个脚本用来测试页面的核心性能数据，比如首屏时间、资源大小、DOM加载时间，是最常用的基础测试。

// 技术栈：Node.js + Playwright
const { chromium } = require('playwright');
const fs = require('fs'); // 导入Node的文件系统模块，用来生成数据文件

(async () => {
  // 启动Chrome浏览器，headless: true表示不显示浏览器窗口，后台运行；如果想看过程可以改成false
  const browser = await chromium.launch({ headless: true });
  // 打开一个新的页面上下文（相当于一个独立的浏览器标签页）
  const context = await browser.newContext();
  // 创建新的页面
  const page = await context.newPage();
  
  // 设置页面加载超时时间，避免等待太久，这里设30秒，足够大多数页面加载
  await page.setDefaultNavigationTimeout(30000);
  
  try {
    console.log('正在访问目标页面...');
    // 访问要测试的网站，waitUntil: 'networkidle'表示等所有网络请求都完成后才算加载完成，比单纯等DOM加载更准确
    await page.goto('https://example.com', { waitUntil: 'networkidle' });
    
    // 调用metrics API，拿到所有性能指标
    const performanceMetrics = await page.metrics();
    
    // 打印关键性能数据，转换成方便读的单位
    console.log('=== 页面核心性能数据 ===');
    // 把秒转换成毫秒，数值更直观
    console.log(`首屏内容渲染时间：${Math.round(performanceMetrics.FirstContentfulPaint * 1000)} 毫秒`);
    console.log(`页面加载总耗时：${Math.round(performanceMetrics.Timestamp * 1000)} 毫秒`);
    console.log(`DOM内容加载完成时间：${Math.round(performanceMetrics.DOMContentLoaded * 1000)} 毫秒`);
    // 资源大小转换成KB，去掉小数更清晰
    console.log(`页面所有资源总大小：${Math.round(performanceMetrics.ResourcesSize / 1024)} KB`);
    
    // 生成HAR文件，方便后续详细分析网络请求，比如哪个图片加载慢了，哪个接口超时了
    const harData = await context.har();
    // 把HAR数据写入文件，命名为performance-test.har，方便后续导入Chrome DevTools
    fs.writeFileSync('performance-test.har', JSON.stringify(harData, null, 2));
    console.log('已生成性能数据文件：performance-test.har');
    
  } catch (error) {
    // 捕获错误，比如页面打不开、超时等，方便排查问题
    console.error('性能测试过程中出错：', error.message);
  } finally {
    // 不管测试成功还是失败，都要关闭浏览器，释放资源
    await browser.close();
    console.log('测试完成，浏览器已关闭');
  }
})();

这个脚本运行后，不仅能拿到关键的性能数字，还会生成一个HAR文件，后面如果要深入分析哪个资源拖了后腿，导入Chrome开发者工具的Network面板就能看到所有请求的细节。

3.2 进阶性能数据收集

如果需要更详细的信息，比如每个请求的时间、域名、资源类型（图片、JS、CSS），可以在基础脚本里加一些代码，或者直接用HAR文件查看，里面已经包含了所有这些信息，不需要额外写复杂的逻辑。

3.3 模拟不同网络环境的性能测试

很多时候，页面在自家的高速网络上快得飞起，但到了用户那里的弱网环境就卡成狗，所以模拟不同网络环境的测试非常重要。Playwright内置了常见的网络条件，比如2G、3G、4G，甚至自定义速度，我们来写一个脚本模拟Regular2G网络的情况：

// 技术栈：Node.js + Playwright
const { chromium } = require('playwright');

(async () => {
  // 启动浏览器，这里可以用默认的无头模式，不显示窗口
  const browser = await chromium.launch();
  // 创建新的上下文（相当于打开一个新的浏览器会话）
  const context = await browser.newContext();
  
  // 重点：设置模拟的网络环境，这里用Playwright内置的Regular2G配置，对应实际的2G网络速度
  // 内置的网络配置还有：Slow3G、Good3G、4G等，大家可以根据需要选，或者自定义速度
  await context.setNetworkConditions('Regular2G');
  
  // 打开页面，访问目标网站，等待所有请求完成
  const page = await context.newPage();
  console.log('正在弱网环境（Regular2G）下测试页面性能...');
  await page.goto('https://example.com', { waitUntil: 'networkidle' });
  
  // 拿到弱网下的性能数据
  const metrics = await page.metrics();
  console.log('弱网下的首屏内容渲染时间：', Math.round(metrics.FirstContentfulPaint * 1000), '毫秒');
  console.log('弱网下页面加载总时间：', Math.round(metrics.Timestamp *1000), '毫秒');
  
  // 测试完成，关闭浏览器
  await browser.close();
  console.log('弱网性能测试完成');
})();

运行这个脚本，就能得到页面在2G网络下的性能表现，这样就能提前发现弱网下的性能问题，比如资源过大或者请求超时，优化后用户在各种网络环境下都有好的体验。

四、Playwright性能测试的典型应用场景

知道怎么用了，再说说什么时候用这个工具，这些场景都是前端开发者经常遇到的：

4.1 性能回归测试

比如你要做一个大的功能迭代，或者改了某个核心模块的代码，上线前用Playwright跑一遍性能测试，和之前的 baseline（也就是之前测好的性能数据）对比，如果这次的首屏时间比之前多了200毫秒以上，就说明可能有性能问题，要排查优化，避免上线后出现性能下降的情况，这个就是性能回归测试，非常适合自动化，不需要手动反复测。

4.2 多浏览器适配的性能测试

比如你做了一个复杂的动画，想知道在Chrome、Firefox、Safari上的性能怎么样，用Playwright只要改一下启动的浏览器类型，把chromium改成firefox或者webkit，就能分别测试，不用开不同的浏览器分别写脚本，一次脚本搞定所有主流浏览器，节省大量时间。

4.3 移动端性能测试

现在很多用户用手机访问网站，Playwright支持模拟移动端设备，比如iPhone 14，设置屏幕大小、触摸输入，同时可以调整网络，就能测移动端的性能，比如手机打开页面的时间，滑动是否流畅，这个对于做响应式网站的开发者非常有用，能提前发现移动端的性能问题。

五、技术优缺点分析

5.1 Playwright做性能测试的优点

第一，跨浏览器支持，不用考虑不同浏览器的API差异，一次脚本适配所有主流浏览器；第二，数据全面，从基础指标到网络请求的每个细节都能拿到，还能生成可视化的HAR文件；第三，场景覆盖全，能模拟各种网络、设备，甚至能模拟用户的点击、输入交互，测试真实使用时的性能；第四，和Node.js集成，容易和CI/CD（持续集成部署）结合，比如每次代码提交后自动跑性能测试，发现问题及时提醒开发者，减少线上风险。

5.2 存在的缺点

第一，对于完全不会Node.js的新手来说，安装和基础脚本编写可能有一点点门槛，不过跟着步骤走基本没问题，而且官方文档也有详细的入门教程；第二，测试结果会有微小的波动，因为每次电脑的性能、网络环境不一样，需要多次测试取平均值，或者固定测试环境（比如用公司的CI服务器，网络固定）；第三，当测试的页面非常大（比如电商首页，有很多图片和脚本），生成的HAR或者trace文件会比较大，分析的时候要注意清理，避免占用磁盘空间。

六、性能测试的注意事项

用Playwright做性能测试，有几个关键点要注意，不然测出来的数据不准，无法真实反映用户的体验：

6.1 测试环境要和生产接近

尽量不要用本地电脑测试，因为本地的网络、电脑性能都不稳定，比如你自己的WiFi可能会卡顿，或者电脑开了很多软件，导致测试结果偏长。最好用staging环境（也就是和生产一模一样的测试环境），服务器配置、代码和生产一致，这样测出来的数据和真实用户的体验更接近。

6.2 多次测试取平均值

单次测试的结果可能有波动，比如第一次测首屏是1200毫秒，第二次可能是1100毫秒，要跑3-5次，取平均或者中位数，这样的数据才可靠，避免因为一次的波动误判问题，比如把正常的测试波动当成性能问题。

6.3 区分实验室数据和真实用户数据

Playwright测的是实验室可控环境下的数据，而真实用户的性能数据（比如用百度统计、谷歌分析的性能监控）会受很多因素影响，比如用户的手机性能、本地网络、是否开了其他软件，所以两者要结合，Playwright用来做回归和兜底测试，保证代码提交不会影响性能，真实用户数据用来做长期的性能监控，了解线上用户的真实体验。

七、总结

用Playwright做前端性能测试，其实就是用自动化的方式把手动测性能的过程简化，覆盖从基础指标到高级场景，不管是新手还是有经验的开发者，都能快速上手。核心就是用好它的metrics API获取基础数据，HAR文件分析网络请求，还有网络模拟功能测试弱网场景，结合实际的应用场景，就能快速发现前端性能问题，优化后提升用户体验，减少线上的性能风险，让前端产品在各种环境下都能有稳定的表现。