218 lines
8.4 KiB
JavaScript
218 lines
8.4 KiB
JavaScript
import { chromium } from 'playwright-core'
|
||
|
||
const BASE = process.env.FMS_BASE || 'http://localhost:5082'
|
||
const SCROLL_MS = Number(process.env.SCROLL_MS || 3500)
|
||
const STEP = Number(process.env.STEP || 120)
|
||
const ROUNDS = Number(process.env.ROUNDS || 2)
|
||
const HEADED = process.env.HEADED === '1'
|
||
// 场景顺序固定：idle/scroll 在前（编辑态会污染后续场景），edit 永远最后
|
||
const SCENES = (process.env.SCENES || 'idle,scroll,scroll-hidden,edit').split(',')
|
||
|
||
const chromePath =
|
||
process.env.CHROME_PATH ||
|
||
'C:/Program Files/Google/Chrome/Application/chrome.exe'
|
||
|
||
const seedStorage = `
|
||
sessionStorage.setItem('fms-login', JSON.stringify({
|
||
loginInfo: { token: 'probe-token', user: { id: 1, account: 'admin', name: '探针用户' } },
|
||
}));
|
||
localStorage.setItem('fms-user', JSON.stringify({ userInfo: { orgId: 'PROBE', account: 'admin' } }));
|
||
localStorage.setItem('app', JSON.stringify({ darkMode: false }));
|
||
`
|
||
|
||
async function measure(page, { scene, durationMs }) {
|
||
// 编辑场景：用 Playwright 真实鼠标点击（带真实坐标），StkTable 选区需要真实事件
|
||
if (scene === 'edit') {
|
||
const rect = await page.evaluate(() => {
|
||
const root = document.querySelector('.fms-table')
|
||
const trs = root.querySelectorAll('.stk-tbody-main tr')
|
||
// 跳过序号列（data-col-key=""）与 vt-x 占位列，点真实数据列
|
||
const td = [...trs[1]?.querySelectorAll('td[data-col-key]')].find(
|
||
(el) => el.getAttribute('data-col-key') !== '',
|
||
)
|
||
if (!td) return null
|
||
const r = td.getBoundingClientRect()
|
||
return { x: r.left + r.width / 2, y: r.top + r.height / 2 }
|
||
})
|
||
if (!rect) throw new Error('no target td for edit')
|
||
await page.mouse.click(rect.x, rect.y)
|
||
await page.waitForTimeout(500)
|
||
const mounted = await page.evaluate(
|
||
() =>
|
||
document.querySelectorAll(
|
||
'.fms-cell-editor-root input:not([type=checkbox]):not([type=hidden]), .fms-cell-editor-root textarea, .fms-cell-editor-root .select',
|
||
).length > 0,
|
||
)
|
||
if (!mounted) throw new Error('editor did not mount after real click')
|
||
}
|
||
|
||
return page.evaluate(
|
||
async ({ scene, durationMs, step }) => {
|
||
const root = document.querySelector('.fms-table')
|
||
if (!root) throw new Error('no .fms-table')
|
||
const els = [...root.querySelectorAll('*')]
|
||
const scrollers = els.filter(
|
||
(el) => el.scrollHeight > el.clientHeight + 2 && getComputedStyle(el).overflowY !== 'hidden',
|
||
)
|
||
const scroller = scrollers.sort(
|
||
(a, b) => b.scrollHeight - b.clientHeight - (a.scrollHeight - a.clientHeight),
|
||
)[0]
|
||
if (!scroller) throw new Error('no vertical scroller')
|
||
const maxScroll = scroller.scrollHeight - scroller.clientHeight
|
||
const driveScroll = scene === 'scroll' || scene === 'scroll-hidden' || scene === 'edit'
|
||
|
||
// scroll-hidden：跳过 paint（保留布局与 JS 链路），隔离渲染 vs JS 开销
|
||
if (scene === 'scroll-hidden') {
|
||
root.style.visibility = 'hidden'
|
||
}
|
||
|
||
scroller.scrollTop = 0
|
||
await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)))
|
||
|
||
if (driveScroll) {
|
||
for (let i = 0; i < 60; i++) {
|
||
scroller.scrollTop = (scroller.scrollTop + step) % (maxScroll + 1)
|
||
await new Promise((r) => requestAnimationFrame(r))
|
||
}
|
||
scroller.scrollTop = 0
|
||
await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)))
|
||
}
|
||
|
||
let frames = 0
|
||
let minGap = Infinity
|
||
let maxGap = 0
|
||
let prev = performance.now()
|
||
const start = performance.now()
|
||
await new Promise((resolve) => {
|
||
const tick = (now) => {
|
||
const gap = now - prev
|
||
prev = now
|
||
frames++
|
||
if (gap < minGap) minGap = gap
|
||
if (gap > maxGap) maxGap = gap
|
||
if (driveScroll) {
|
||
if (scroller.scrollTop + step < maxScroll) scroller.scrollTop += step
|
||
else scroller.scrollTop = 0
|
||
}
|
||
if (now - start < durationMs) requestAnimationFrame(tick)
|
||
else resolve()
|
||
}
|
||
requestAnimationFrame(tick)
|
||
})
|
||
const elapsed = (performance.now() - start) / 1000
|
||
const fps = frames / elapsed
|
||
const editorCount = root.querySelectorAll(
|
||
'.fms-cell-editor-root input:not([type=checkbox]):not([type=hidden]), .fms-cell-editor-root textarea, .fms-cell-editor-root .select',
|
||
).length
|
||
const displayCount = root.querySelectorAll('.fms-cell-display').length
|
||
const nativeCellCount = root.querySelectorAll('.stk-tbody-main .table-cell-wrapper').length
|
||
return {
|
||
scene,
|
||
fps: Math.round(fps * 10) / 10,
|
||
avgFrameMs: Math.round(((elapsed * 1000) / frames) * 10) / 10,
|
||
minGapMs: Math.round(minGap),
|
||
maxGapMs: Math.round(maxGap),
|
||
renderedRows: root.querySelectorAll('.stk-tbody-main tr').length,
|
||
editorCount,
|
||
displayCount,
|
||
nativeCellCount,
|
||
maxScroll: Math.round(maxScroll),
|
||
}
|
||
},
|
||
{ scene, durationMs, step: STEP },
|
||
)
|
||
}
|
||
|
||
const browser = await chromium.launch({
|
||
executablePath: chromePath,
|
||
headless: !HEADED,
|
||
args: [
|
||
'--no-sandbox',
|
||
'--disable-dev-shm-usage',
|
||
'--disable-gpu-sandbox',
|
||
'--disable-background-timer-throttling',
|
||
],
|
||
})
|
||
const context = await browser.newContext({ viewport: { width: 1280, height: 800 } })
|
||
await context.addInitScript(seedStorage)
|
||
const page = await context.newPage()
|
||
page.on('pageerror', (err) => console.log('[pageerror]', String(err).slice(0, 300)))
|
||
|
||
console.log(`打开 ${BASE}/dashboard ... (headless=${!HEADED})`)
|
||
await page.goto(`${BASE}/dashboard`, { waitUntil: 'domcontentloaded', timeout: 30000 })
|
||
await page.waitForSelector('.fms-table', { timeout: 20000 })
|
||
await page.waitForFunction(() => document.querySelectorAll('.stk-tbody-main tr').length > 0)
|
||
await page.waitForTimeout(1200)
|
||
console.log(`页面: ${await page.title()} | ${page.url()}`)
|
||
|
||
// 空页面 rAF 基准（headless 上限）
|
||
try {
|
||
const base = await page.evaluate(async ({ durationMs }) => {
|
||
let frames = 0
|
||
const start = performance.now()
|
||
await new Promise((resolve) => {
|
||
const tick = (now) => {
|
||
frames++
|
||
if (now - start < durationMs) requestAnimationFrame(tick)
|
||
else resolve()
|
||
}
|
||
requestAnimationFrame(tick)
|
||
})
|
||
return { fps: Math.round((frames / ((performance.now() - start) / 1000)) * 10) / 10 }
|
||
}, { durationMs: 2000 })
|
||
console.log(`[同页 rAF 上限基准] FPS=${base.fps}`)
|
||
} catch (e) {
|
||
console.log('rAF 基准跳过:', String(e).slice(0, 120))
|
||
}
|
||
|
||
const results = {}
|
||
for (let round = 1; round <= ROUNDS; round++) {
|
||
console.log(`\n===== 第 ${round}/${ROUNDS} 轮 =====`)
|
||
for (const scene of SCENES) {
|
||
const r = await measure(page, { scene, durationMs: SCROLL_MS })
|
||
const tag = {
|
||
idle: '静止',
|
||
scroll: '滚动',
|
||
'scroll-hidden': '滚动(隐藏paint)',
|
||
edit: '编辑中滚动',
|
||
}[scene] || scene
|
||
console.log(
|
||
`[${tag}] FPS=${r.fps} avgFrame=${r.avgFrameMs}ms minGap=${r.minGapMs} maxGap=${r.maxGapMs} ` +
|
||
`rows=${r.renderedRows} 原生格=${r.nativeCellCount} 编辑器=${r.editorCount} 展示格=${r.displayCount}`,
|
||
)
|
||
;(results[scene] ??= []).push(r.fps)
|
||
// 恢复可见性并回顶
|
||
await page.evaluate(() => {
|
||
const root = document.querySelector('.fms-table')
|
||
if (root) root.style.visibility = ''
|
||
const els = root ? [...root.querySelectorAll('*')] : []
|
||
const sc = els
|
||
.filter((el) => el.scrollHeight > el.clientHeight + 2)
|
||
.sort((a, b) => b.scrollHeight - b.clientHeight - (a.scrollHeight - a.clientHeight))[0]
|
||
if (sc) sc.scrollTop = 0
|
||
})
|
||
await page.waitForTimeout(300)
|
||
}
|
||
// 每轮结束重载页面，清掉编辑态/滚动位置，避免污染下一轮
|
||
if (round < ROUNDS) {
|
||
await page.reload({ waitUntil: 'domcontentloaded' })
|
||
await page.waitForSelector('.fms-table', { timeout: 20000 })
|
||
await page.waitForFunction(() => document.querySelectorAll('.stk-tbody-main tr').length > 0)
|
||
await page.waitForTimeout(1200)
|
||
}
|
||
}
|
||
|
||
console.log('\n===== 汇总（FPS） =====')
|
||
for (const [scene, list] of Object.entries(results)) {
|
||
const avg = list.reduce((a, b) => a + b, 0) / list.length
|
||
const tag = {
|
||
idle: '静止',
|
||
scroll: '滚动',
|
||
'scroll-hidden': '滚动(隐藏paint)',
|
||
edit: '编辑中滚动',
|
||
}[scene] || scene
|
||
console.log(`${tag}: ${list.join(' / ')} → 平均 ${Math.round(avg * 10) / 10}`)
|
||
}
|
||
|
||
await browser.close()
|