20260819173221
This commit is contained in:
oneao committed
1 parent
1ffc8e1ac9
commit
a0a4273f4c
326 files changed
+301646
-2314
No files matched your search
@@ -0,0 +1,217 @@
|
||||
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()
|
||||
Reference in new issue
Block a user