我要评论概要
对于现在的网站而言，性能的重要性不言而喻，每一家公司的网站都在追求更快地性能，更好地体验，但是，该怎么去找到影响网站速度的因素，如何优化性能，这是一个非常考验前端工程师技术功底的时刻。
但其实，现代浏览器公开了许多的性能指标，这些指标可以帮我们快速确定需要改进的内容和改进方法，今天，我想和大家介绍一种方案，使用playwright自动化测试页面性能。
对 playwright 不了解的同学，可以移步我的上一篇文章了解： playwright使用指南
我们可以通过 playwright 查询浏览器提供的各种与性能相关的 api，然后识别导致网站速度变慢的原因。比如，chrome 浏览器提供了webvitals 指标，这些指标包括time to first byte (ttfb)、 total blocktime (tbt) 和 first contentful paint (fcp)，这是非常好的衡量用户体验的指标，很值得我们在测试中进行监控。
接下来，给大家介绍几种常见的衡量页面性能的方案。
导航和资源加载时间 api
这个api允许你检索和页面加载时间相关的所有事件的时间，比如domcomplete time , duration 和 connectend。我们可以在测试过程中使用这些指标来检测网页性能情况。
1. performance 得分
我们可以使用playwright定期检查页面性能，确保网页的性能不低于你设置的某个特定标准。
例如下面的这段代码，我们可以使用 playwright 来自动化检测淘宝网的 domcomplete 时间，如果它低于某一个阈值，然后会提醒我们测试用例失败，这样我们就可以及时去对页面做性能回归。
import { chromium } from 'playwright';
(async () => {
const browser = await chromium.launch({
headless: true,
});
const context = await browser.newcontext()
const page = await context.newpage()
await page.goto('https://www.taobao.com/');
const navigationtimingjson = await page.evaluate(() =>
json.stringify(performance.getentriesbytype('navigation'))
)
const navigationtiming = json.parse(navigationtimingjson)
if (navigationtiming.domcomplete < 2000) {
console.error('error: domcomplete below 2 seconds')
}
await browser.close()
})()
2. 资源加载时间 api
这个api 提供了一种可以让我们获取页面特定资源加载时间的方法，方便我们衡量页面资源加载时间。
例如，我们可以使用下面这段代码来检查淘宝网首页的webp格式图片的加载时间。
import { chromium } from 'playwright';
(async () => {
const browser = await chromium.launch({
headless: true,
});
const context = await browser.newcontext()
const page = await context.newpage()
await page.goto('https://www.taobao.com/');
const resourcetimingjson = await page.evaluate(() =>
json.stringify(window.performance.getentriesbytype('resource'))
)
const resourcetiming = json.parse(resourcetimingjson)
const logoresourcetiming = resourcetiming.find((element) =>
element.name.includes('.webp')
)
console.log(logoresourcetiming)
await browser.close()
})()
页面绘制时间 api
我们可以使用页面绘制时间 api 来检索页面 first paint (fp)和 first contentful paint (fcp)的时间。
import { chromium } from 'playwright';
(async () => {
const browser = await chromium.launch({
headless: true,
});
const context = await browser.newcontext()
const page = await context.newpage()
await page.goto('https://www.taobao.com/');
const painttimingjson = await page.evaluate(() =>
json.stringify(window.performance.getentriesbytype('paint'))
)
const painttiming = json.parse(painttimingjson)
console.log(painttiming)
await browser.close()
})()
布局稳定性 api
这个api可以提供有关页面布局变化的信息，可以用来计算网页的 core web vital cumulative layout shift (cls) 数据
import { chromium } from 'playwright';
(async () => {
const browser = await chromium.launch({
headless: true,
});
const context = await browser.newcontext()
const page = await context.newpage()
await page.goto('https://www.taobao.com/');
const cummulativelayoutshift = await page.evaluate(() => {
return new promise((resolve) => {
let cls = 0
new performanceobserver((l) => {
const entries = l.getentries()
entries.foreach(entry => {
if (!entry.hadrecentinput) {
cls += entry.value
}
})
resolve(cls)
}).observe({
type: 'layout-shift',
buffered: true
})
})
})
console.log(parsefloat(cummulativelayoutshift))
await browser.close()
})()
long task（长任务） api
long task api 会返回一个javascript 执行列表，这些列表中的执行需要50毫秒才能完成，意味着阻塞了页面的ui线程，造成页面卡顿。我们可以用这个api来计算页面的总阻塞时间 total blocking time (tbt).
例如下面这段代码，我们使用了 performanceobserver 来计算出页面长任务时间超过50毫秒的时间之和。
import { chromium } from 'playwright';
(async () => {
const browser = await chromium.launch({
headless: true,
});
const context = await browser.newcontext()
const page = await context.newpage()
await page.goto('https://www.taobao.com/');
const totalblockingtime = await page.evaluate(() => {
return new promise((resolve) => {
let totalblockingtime = 0
new performanceobserver(function (list) {
const perfentries = list.getentries()
for (const perfentry of perfentries) {
totalblockingtime += perfentry.duration - 50
}
resolve(totalblockingtime)
}).observe({ type: 'longtask', buffered: true })
// resolve promise if there haven't been any long tasks
settimeout(() => resolve(totalblockingtime), 5000)
})
})
console.log(parsefloat(totalblockingtime))
await browser.close()
})()
chrome devtools performance
chrome devtools 提供了很多非常有用的功能，我们可以充分利用起来。例如，我们可以使用network.emulatenetworkconditions 来控制浏览器网速。
import { chromium } from 'playwright';
(async () => {
const browser = await chromium.launch({
headless: true,
});
const context = await browser.newcontext()
const page = await context.newpage()
await page.goto('https://www.taobao.com/');
const context = await browser.newcontext()
const page = await context.newpage()
await client.send('network.enable')
await client.send('network.emulatenetworkconditions', {
offline: false,
downloadthroughput: (5 * 1024 * 1024) / 8,
uploadthroughput: (4 * 1024 * 1024) / 8,
latency: 30
)
await page.goto('https://testingbot.com/');
await browser.close()
})()
以上就是node.js使用playwright自动化测试页面性能的详细内容，更多关于playwright测试页面性能的资料请关注代码网其它相关文章！
发表评论