在现代 Web 应用中，性能对于用户体验和业务目标的实现至关重要。Playwright 不仅支持功能测试，还提供了一些强大的工具，用于捕获页面性能指标、分析页面加载时间，以及优化 Web 应用的性能。
1 性能测试的意义
性能测试的目标是评估 Web 应用的加载速度、响应时间和资源使用情况，常见的性能问题包括：
- 页面加载时间过长。
- 资源文件过大。
- 前端渲染时间高。
通过性能测试，可以定位这些问题并优化应用性能，提升用户体验。
2 捕获页面性能指标
Playwright 提供了多种方式来捕获页面性能相关的数据，包括浏览器开发者工具协议（CDP）和浏览器日志。
2.1 使用 Performance Timing API
Performance Timing API 提供了从页面导航开始到加载完成的详细时间数据。
示例：捕获 Performance Timing 数据
import com.microsoft.playwright.*;
public class PerformanceTimingExample {
public static void main(String[] args) {
try (Playwright playwright = Playwright.create()) {
Browser browser = playwright.chromium().launch();
Page page = browser.newPage();
// 开始导航
page.navigate("https://example.com");
// 获取性能数据
Object timing = page.evaluate("() => JSON.stringify(window.performance.timing)");
System.out.println("Performance Timing: " + timing);
browser.close();
}
}
}
2.2 使用浏览器开发者工具协议（CDP）
Playwright 支持通过 CDP 捕获性能数据，例如网络请求时间和资源加载时间。
示例：捕获网络请求时间
page.onRequest(request -> System.out.println("请求开始: " + request.url()));
page.onResponse(response -> System.out.println("响应完成: " + response.url()));
page.navigate("https://example.com");
3 分析页面加载时间
页面加载时间是性能测试的重要指标，通常可以通过以下方式分析。
3.1 使用 HAR 文件捕获网络活动
HAR（HTTP Archive）文件可以记录页面加载过程中的所有网络活动。
示例：生成 HAR 文件
BrowserContext context = browser.newContext(new Browser.NewContextOptions()
.setRecordHarPath(Paths.get("network_log.har")));
Page page = context.newPage();
page.navigate("https://example.com");
context.close();
System.out.println("HAR 文件已生成: network_log.har");
3.2 测量特定操作的时间
可以通过记录时间戳测量某个操作的耗时。
示例：测量页面加载时间
long startTime = System.currentTimeMillis();
page.navigate("https://example.com");
long endTime = System.currentTimeMillis();
System.out.println("页面加载时间: " + (endTime - startTime) + " 毫秒");
4 优化页面性能的测试策略
4.1 检查资源加载优化
测试页面是否存在未压缩的资源或不必要的请求。
示例：检查未压缩的资源
page.onResponse(response -> {
if (response.request().resourceType().equals("script") && !response.headers().containsKey("content-encoding")) {
System.out.println("未压缩的脚本文件: " + response.url());
}
});
page.navigate("https://example.com");
4.2 模拟网络条件并测量性能
测试应用在慢速网络或高延迟环境下的表现。
示例：模拟 3G 网络
BrowserContext context = browser.newContext(new Browser.NewContextOptions()
.setNetworkConditions(new BrowserContext.NetworkConditions()
.setDownloadThroughput(50 * 1024) // 50 KB/s
.setUploadThroughput(20 * 1024) // 20 KB/s
.setLatency(300))); // 延迟 300ms
Page page = context.newPage();
page.navigate("https://example.com");
System.out.println("页面加载完成（模拟 3G 网络）");
5 综合案例：性能测试与优化分析
案例描述
- 捕获页面加载的完整性能数据。
- 分析加载时间并识别性能瓶颈。
- 提出优化建议并验证优化结果。
代码实现
import com.microsoft.playwright.*;
import java.nio.file.Paths;
public class PerformanceTestCase {
public static void main(String[] args) {
try (Playwright playwright = Playwright.create()) {
Browser browser = playwright.chromium().launch();
BrowserContext context = browser.newContext(new Browser.NewContextOptions()
.setRecordHarPath(Paths.get("performance.har")));
Page page = context.newPage();
// 捕获 Performance Timing 数据
page.navigate("https://example.com");
Object timing = page.evaluate("() => JSON.stringify(window.performance.timing)");
System.out.println("Performance Timing 数据: " + timing);
// 测量页面加载时间
long startTime = System.currentTimeMillis();
page.navigate("https://example.com");
long endTime = System.currentTimeMillis();
System.out.println("页面加载时间: " + (endTime - startTime) + " 毫秒");
context.close();
browser.close();
System.out.println("HAR 文件已生成: performance.har");
}
}
}
6 性能测试的最佳实践
-
明确性能目标：
确定需要测试的关键性能指标，例如首次内容渲染时间（FCP）、页面完全加载时间等。 -
模拟真实环境：
使用真实用户设备的网络条件和硬件配置进行测试。 -
定期执行性能测试：
将性能测试集成到 CI/CD 流程中，以便定期监控性能变化。 -
使用工具分析数据：
借助第三方工具（如 Chrome DevTools、WebPageTest）分析 HAR 文件和性能数据。