u
This commit is contained in:
oneao committed
1 parent
e7c84a82a2
commit
025d3232c4
65 files changed
+9838
-9111
No files matched your search
@@ -0,0 +1,430 @@
|
||||
import { chromium } from '@playwright/test'
|
||||
|
||||
/**
|
||||
* /table-test 探针 v10 —— 决定性归因（只读诊断，不改仓库代码）。
|
||||
*
|
||||
* 三个关键实验：
|
||||
*
|
||||
* ① 冻结克隆对照（最关键）
|
||||
* 把当前 `.stk-table` 的 outerHTML 克隆一份、塞进同样尺寸的容器，然后滚**克隆**。
|
||||
* 克隆不受 Vue 管理 —— 滚动它不触发任何 JS 重渲染。
|
||||
* · 克隆也慢 → 瓶颈在浏览器侧（样式/布局/绘制/合成）
|
||||
* · 克隆很快 → 瓶颈在 Vue/库的 JS 重渲染
|
||||
*
|
||||
* ② LoAF 完整字段（含 forcedStyleAndLayoutDuration / invoker / 暂停时长）
|
||||
*
|
||||
* ③ 数据量对照再确认：100 行（虚拟滚动关闭，无逐帧 DOM 改动）vs 1000 行（虚拟开启）
|
||||
*
|
||||
* ④ errorCount：一次真实「编辑提交」会额外付多少主线程时间
|
||||
*/
|
||||
|
||||
const URL_BASE = process.env.PROBE_URL || 'http://127.0.0.1:5090'
|
||||
const MENU_CODE = 'menu.table_test'
|
||||
|
||||
const median = (a) => {
|
||||
const s = [...a].sort((x, y) => x - y)
|
||||
return s.length ? s[Math.floor(s.length / 2)] : null
|
||||
}
|
||||
const r1 = (n) => (n == null ? null : +n.toFixed(1))
|
||||
|
||||
const browser = await chromium.launch({ headless: false })
|
||||
const context = await browser.newContext({ viewport: { width: 1600, height: 900 } })
|
||||
await context.route('**/api/data/loaddata', async (route) => {
|
||||
let viewName = ''
|
||||
try {
|
||||
viewName = JSON.parse(route.request().postData() || '').view_name || ''
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
const response = await route.fetch()
|
||||
if (viewName !== 's_power' && viewName !== 's_user_power') return route.fulfill({ response })
|
||||
let json
|
||||
try {
|
||||
json = await response.json()
|
||||
} catch {
|
||||
return route.fulfill({ response })
|
||||
}
|
||||
const rows = Array.isArray(json?.data) ? json.data : []
|
||||
if (viewName === 's_power') {
|
||||
if (!rows.some((r) => r.b_id === MENU_CODE)) rows.push({ b_id: MENU_CODE, b_canuse: 1 })
|
||||
} else if (!rows.some((r) => r.b_power_id === MENU_CODE)) {
|
||||
rows.push({ b_user_id: 'demo_zhangwei', b_power_id: MENU_CODE, b_canuse: 1 })
|
||||
}
|
||||
json.data = rows
|
||||
await route.fulfill({
|
||||
response,
|
||||
body: JSON.stringify(json),
|
||||
headers: { ...response.headers(), 'content-type': 'application/json' },
|
||||
})
|
||||
})
|
||||
const page = await context.newPage()
|
||||
page.on('pageerror', (e) => console.log('[pageerror]', String(e).slice(0, 200)))
|
||||
await page.goto(`${URL_BASE}/table-test`, { waitUntil: 'domcontentloaded' })
|
||||
await page.waitForSelector('.stk-table', { timeout: 90000 })
|
||||
await page.waitForTimeout(3000)
|
||||
|
||||
/** 通用滚动驱动：对指定选择器（'live' | 'clone'）滚动并测帧率 */
|
||||
async function drive(which, { axis = 'y', steps = 60, px = 60 } = {}) {
|
||||
return page.evaluate(
|
||||
async ({ which, axis, steps, px }) => {
|
||||
const sel = which === 'live' ? '#__probe_live .stk-table' : '#__probe_clone .stk-table'
|
||||
const cont = document.querySelector(sel)
|
||||
if (!cont) return { error: 'missing ' + sel }
|
||||
cont.scrollTop = 0
|
||||
cont.scrollLeft = 0
|
||||
await new Promise((r) => requestAnimationFrame(r))
|
||||
const frames = []
|
||||
let last = performance.now()
|
||||
let stop = false
|
||||
const tick = () => {
|
||||
const now = performance.now()
|
||||
frames.push(now - last)
|
||||
last = now
|
||||
if (!stop) requestAnimationFrame(tick)
|
||||
}
|
||||
requestAnimationFrame(tick)
|
||||
for (let i = 0; i < steps; i += 1) {
|
||||
await new Promise((r) => requestAnimationFrame(r))
|
||||
if (axis === 'y') {
|
||||
const max = cont.scrollHeight - cont.clientHeight
|
||||
cont.scrollTop = cont.scrollTop >= max - 1 ? 0 : Math.min(max, cont.scrollTop + px)
|
||||
} else {
|
||||
const max = cont.scrollWidth - cont.clientWidth
|
||||
cont.scrollLeft = cont.scrollLeft >= max - 1 ? 0 : Math.min(max, cont.scrollLeft + px)
|
||||
}
|
||||
}
|
||||
stop = true
|
||||
const sorted = [...frames].sort((a, b) => a - b)
|
||||
const avg = frames.reduce((a, b) => a + b, 0) / frames.length
|
||||
const q = (p) => sorted[Math.min(sorted.length - 1, Math.floor(sorted.length * p))]
|
||||
return {
|
||||
fps: +(1000 / avg).toFixed(1),
|
||||
avg: +avg.toFixed(1),
|
||||
p95: +q(0.95).toFixed(1),
|
||||
scrollH: cont.scrollHeight,
|
||||
clientH: cont.clientHeight,
|
||||
scrollW: cont.scrollWidth,
|
||||
clientW: cont.clientWidth,
|
||||
}
|
||||
},
|
||||
{ which, axis, steps, px },
|
||||
)
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* ① 冻结克隆对照
|
||||
* ============================================================ */
|
||||
console.log('################ ① 冻结克隆对照 ################')
|
||||
|
||||
const setup = await page.evaluate(() => {
|
||||
const live = document.querySelector('.stk-table')
|
||||
if (!live) return { error: 'no live table' }
|
||||
const r = live.getBoundingClientRect()
|
||||
|
||||
// 给 live 包一个稳定 id 便于选择
|
||||
live.id = '__probe_live_inner'
|
||||
if (!live.parentElement.id) live.parentElement.id = '__probe_live'
|
||||
|
||||
// 克隆整棵子树（含 530 个 td / 全部 class），放进同样尺寸的容器
|
||||
const clone = live.cloneNode(true)
|
||||
clone.id = '__probe_clone_inner'
|
||||
clone.removeAttribute('data-v-app')
|
||||
|
||||
const holder = document.createElement('div')
|
||||
holder.id = '__probe_clone'
|
||||
holder.style.cssText = `position:fixed;left:0;top:0;width:${r.width}px;height:${r.height}px;z-index:99999;background:#fff;`
|
||||
holder.appendChild(clone)
|
||||
document.body.appendChild(holder)
|
||||
|
||||
return {
|
||||
width: r.width,
|
||||
height: r.height,
|
||||
liveSel: '#__probe_live .stk-table',
|
||||
cloneSel: '#__probe_clone .stk-table',
|
||||
liveTds: live.querySelectorAll('tbody td').length,
|
||||
cloneTds: clone.querySelectorAll('tbody td').length,
|
||||
}
|
||||
})
|
||||
console.log('克隆搭建:', JSON.stringify(setup))
|
||||
|
||||
// 隐藏克隆时先测 live（避免克隆覆盖带来的合成差异）
|
||||
await page.evaluate(() => {
|
||||
const h = document.querySelector('#__probe_clone')
|
||||
if (h) h.style.visibility = 'hidden'
|
||||
})
|
||||
await page.waitForTimeout(300)
|
||||
|
||||
const liveY = []
|
||||
for (let i = 0; i < 3; i += 1) liveY.push(await drive('live', { axis: 'y', steps: 55, px: 60 }))
|
||||
await page.evaluate(() => {
|
||||
const h = document.querySelector('#__probe_clone')
|
||||
if (h) h.remove()
|
||||
})
|
||||
console.log('live（Vue 管理，虚拟滚动逐帧改 DOM）纵向 ×3:', JSON.stringify(liveY.map((r) => r.fps)))
|
||||
|
||||
/* --- 重建克隆：A) 原样克隆（含 sticky / 渐变 / class） --- */
|
||||
async function cloneTest(label, mutateCss) {
|
||||
await page.evaluate((css) => {
|
||||
document.querySelector('#__probe_clone')?.remove()
|
||||
const live = document.querySelector('#__probe_live .stk-table') || document.querySelector('.stk-table')
|
||||
const r = live.getBoundingClientRect()
|
||||
const clone = live.cloneNode(true)
|
||||
clone.removeAttribute('id')
|
||||
const holder = document.createElement('div')
|
||||
holder.id = '__probe_clone'
|
||||
holder.style.cssText = `position:fixed;left:0;top:0;width:${r.width}px;height:${r.height}px;z-index:99999;background:#fff;`
|
||||
// 绝对定位的 mask：把 live 盖住（量的是可见区域的真实光栅化成本）
|
||||
holder.appendChild(clone)
|
||||
document.body.appendChild(holder)
|
||||
if (css) {
|
||||
const s = document.createElement('style')
|
||||
s.dataset.clone = '1'
|
||||
s.textContent = css
|
||||
document.head.appendChild(s)
|
||||
}
|
||||
}, mutateCss || '')
|
||||
await page.waitForTimeout(500)
|
||||
const runs = []
|
||||
for (let i = 0; i < 3; i += 1) runs.push(await drive('clone', { axis: 'y', steps: 55, px: 60 }))
|
||||
const runsX = []
|
||||
for (let i = 0; i < 2; i += 1) runsX.push(await drive('clone', { axis: 'x', steps: 45, px: 80 }))
|
||||
console.log(
|
||||
`${label}\n 纵 ${runs.map((r) => r.fps).join('/')} fps (中位 ${r1(median(runs.map((r) => r.fps)))}) | 横 ${runsX.map((r) => r.fps).join('/')} fps (中位 ${r1(median(runsX.map((r) => r.fps)))})`,
|
||||
)
|
||||
await page.evaluate(() => {
|
||||
document.querySelectorAll('style[data-clone]').forEach((s) => s.remove())
|
||||
document.querySelector('#__probe_clone')?.remove()
|
||||
})
|
||||
await page.waitForTimeout(200)
|
||||
return { y: r1(median(runs.map((r) => r.fps))), x: r1(median(runsX.map((r) => r.fps))) }
|
||||
}
|
||||
|
||||
console.log('\n--- 克隆（无 Vue 参与，纯浏览器滚动同一份 DOM）---')
|
||||
const cloneResult = await cloneTest('A) 原样克隆')
|
||||
await cloneTest(
|
||||
'B) 克隆 + 去掉固定列 sticky',
|
||||
`#__probe_clone td.fixed-cell, #__probe_clone th.fixed-cell { position: static !important; }`,
|
||||
)
|
||||
await cloneTest(
|
||||
'C) 克隆 + 去掉单元格背景渐变（格线）',
|
||||
`#__probe_clone td, #__probe_clone th { background-image: none !important; }`,
|
||||
)
|
||||
await cloneTest(
|
||||
'D) 克隆 + 去掉 sticky 与全部 box-shadow',
|
||||
`#__probe_clone td.fixed-cell, #__probe_clone th.fixed-cell { position: static !important; }
|
||||
#__probe_clone td, #__probe_clone th, #__probe_clone tr { box-shadow: none !important; }`,
|
||||
)
|
||||
|
||||
/* ============================================================
|
||||
* ② LoAF 完整字段
|
||||
* ============================================================ */
|
||||
console.log('\n################ ② LoAF 完整字段（纵向滚动）################')
|
||||
const loaf = await page.evaluate(async () => {
|
||||
const cont = document.querySelector('#__probe_live .stk-table') || document.querySelector('.stk-table')
|
||||
cont.scrollTop = 0
|
||||
await new Promise((r) => requestAnimationFrame(r))
|
||||
const entries = []
|
||||
const obs = new PerformanceObserver((l) => {
|
||||
for (const e of l.getEntries()) entries.push(e)
|
||||
})
|
||||
obs.observe({ type: 'long-animation-frame', buffered: false })
|
||||
for (let i = 0; i < 45; i += 1) {
|
||||
await new Promise((r) => requestAnimationFrame(r))
|
||||
const max = cont.scrollHeight - cont.clientHeight
|
||||
cont.scrollTop = cont.scrollTop >= max - 1 ? 0 : Math.min(max, cont.scrollTop + 60)
|
||||
}
|
||||
await new Promise((r) => setTimeout(r, 250))
|
||||
obs.disconnect()
|
||||
|
||||
const scripts = []
|
||||
const frames = []
|
||||
for (const e of entries) {
|
||||
frames.push({
|
||||
duration: +e.duration.toFixed(1),
|
||||
blocking: +(e.blockingDuration || 0).toFixed(1),
|
||||
renderStart: +(e.renderStart || 0).toFixed(1),
|
||||
styleLayoutStart: +(e.styleAndLayoutStart || 0).toFixed(1),
|
||||
scripts: (e.scripts || []).map((s) => ({
|
||||
name: s.name,
|
||||
entryType: s.entryType,
|
||||
invoker: s.invoker,
|
||||
invokerType: s.invokerType,
|
||||
duration: +s.duration.toFixed(1),
|
||||
forcedStyleAndLayout:
|
||||
s.forcedStyleAndLayoutDuration != null ? +s.forcedStyleAndLayoutDuration.toFixed(1) : undefined,
|
||||
pause: s.pauseDuration != null ? +s.pauseDuration.toFixed(1) : undefined,
|
||||
url: (s.sourceURL || '').split('/').slice(-1)[0].split('?')[0],
|
||||
fn: s.sourceFunctionName,
|
||||
pos: s.sourceCharPosition,
|
||||
})),
|
||||
})
|
||||
for (const s of e.scripts || []) scripts.push(s)
|
||||
}
|
||||
// 按脚本来源汇总
|
||||
const byKey = new Map()
|
||||
for (const s of scripts) {
|
||||
const key = `${s.name || s.invoker} | ${(s.sourceURL || '').split('/').slice(-1)[0].split('?')[0]} | fn=${s.sourceFunctionName || '-'} | pos=${s.sourceCharPosition} | invokerType=${s.invokerType}`
|
||||
const cur = byKey.get(key) || { total: 0, n: 0, forced: 0, pause: 0 }
|
||||
cur.total += s.duration
|
||||
cur.n += 1
|
||||
cur.forced += s.forcedStyleAndLayoutDuration || 0
|
||||
cur.pause += s.pauseDuration || 0
|
||||
byKey.set(key, cur)
|
||||
}
|
||||
return {
|
||||
loafCount: frames.length,
|
||||
totalLoafMs: +frames.reduce((a, f) => a + f.duration, 0).toFixed(0),
|
||||
totalBlockingMs: +frames.reduce((a, f) => a + f.blocking, 0).toFixed(0),
|
||||
sampleFrames: frames.slice(0, 3),
|
||||
scriptSources: [...byKey.entries()]
|
||||
.map(([k, v]) => ({
|
||||
key: k,
|
||||
totalMs: +v.total.toFixed(1),
|
||||
calls: v.n,
|
||||
forcedStyleLayoutMs: +v.forced.toFixed(1),
|
||||
pauseMs: +v.pause.toFixed(1),
|
||||
}))
|
||||
.sort((a, b) => b.totalMs - a.totalMs)
|
||||
.slice(0, 8),
|
||||
}
|
||||
})
|
||||
console.log(JSON.stringify(loaf, null, 2))
|
||||
|
||||
/* ============================================================
|
||||
* ③ 数据量对照（确认「逐帧 DOM 改动」是否为主因）
|
||||
* ============================================================ */
|
||||
console.log('\n################ ③ 数据量对照：虚拟滚动开/关 ################')
|
||||
for (const n of [10, 100, 1000]) {
|
||||
await page.selectOption('.booking__select', String(n))
|
||||
await page.waitForTimeout(2200)
|
||||
const info = await page.evaluate(() => {
|
||||
const t = document.querySelector('.stk-table')
|
||||
return {
|
||||
cls: t.className.includes('vt-on') ? 'vt-on(虚拟开启)' : 'vt-off(全量渲染)',
|
||||
trs: document.querySelectorAll('.stk-tbody-main tr').length,
|
||||
tds: document.querySelectorAll('.stk-tbody-main td').length,
|
||||
scrollH: t.scrollHeight,
|
||||
clientH: t.clientHeight,
|
||||
}
|
||||
})
|
||||
// 逐帧 DOM 改动计数
|
||||
const churn = await page.evaluate(async () => {
|
||||
const tbody = document.querySelector('.stk-tbody-main')
|
||||
const cont = document.querySelector('.stk-table')
|
||||
let child = 0
|
||||
let attrs = 0
|
||||
const obs = new MutationObserver((recs) => {
|
||||
for (const m of recs) {
|
||||
if (m.type === 'childList') child += m.addedNodes.length + m.removedNodes.length
|
||||
else if (m.type === 'attributes') attrs += 1
|
||||
}
|
||||
})
|
||||
obs.observe(tbody, { childList: true, subtree: true, attributes: true })
|
||||
const F = 40
|
||||
for (let i = 0; i < F; i += 1) {
|
||||
await new Promise((r) => requestAnimationFrame(r))
|
||||
const max = cont.scrollHeight - cont.clientHeight
|
||||
cont.scrollTop = cont.scrollTop >= max - 1 ? 0 : Math.min(max, cont.scrollTop + 60)
|
||||
}
|
||||
await new Promise((r) => setTimeout(r, 60))
|
||||
obs.disconnect()
|
||||
return { childPerFrame: +(child / F).toFixed(1), attrPerFrame: +(attrs / F).toFixed(1) }
|
||||
})
|
||||
const y = await drive('live', { axis: 'y', steps: 50, px: 60 })
|
||||
const x = await drive('live', { axis: 'x', steps: 40, px: 80 })
|
||||
console.log(
|
||||
`${String(n).padStart(5)} 行 ${info.cls.padEnd(16)} tr=${String(info.trs).padStart(3)} td=${String(info.tds).padStart(4)} | 逐帧 节点${String(churn.childPerFrame).padStart(5)} 属性${String(churn.attrPerFrame).padStart(5)} | 纵 ${String(y.fps).padStart(5)}fps | 横 ${String(x.fps).padStart(5)}fps`,
|
||||
)
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* ④ errorCount：一次「编辑提交」的额外成本
|
||||
* ============================================================ */
|
||||
console.log('\n################ ④ 编辑提交 → errorCount 全表校验成本 ################')
|
||||
await page.selectOption('.booking__select', '1000')
|
||||
await page.waitForTimeout(2200)
|
||||
const commitCost = await page.evaluate(() => {
|
||||
let i = document.querySelector('.booking')?.__vueParentComponent
|
||||
while (i && !i.setupState?.rows) i = i.parent
|
||||
if (!i) return { error: 'no page instance' }
|
||||
const ss = i.setupState
|
||||
const rows = ss.rows?.value ?? ss.rows
|
||||
void ss.errorCount?.value // 预热
|
||||
|
||||
// 模拟「编辑提交」：写一个响应式行字段（editors 的 commitInputDraft 就是这么做的）
|
||||
const out = []
|
||||
for (let k = 0; k < 5; k += 1) {
|
||||
const r = rows[k]
|
||||
const t0 = performance.now()
|
||||
r.remark = `${r.remark ?? ''}x`
|
||||
// 等 Vue 把 errorCount 重算 + 页面重渲染跑完
|
||||
const t1 = performance.now()
|
||||
out.push({ writeMs: +(t1 - t0).toFixed(2) })
|
||||
r.remark = String(r.remark).slice(0, -1)
|
||||
}
|
||||
return { rows: rows.length, out }
|
||||
})
|
||||
console.log('提交写入本身:', JSON.stringify(commitCost))
|
||||
|
||||
// 直接量 errorCount 重算
|
||||
const recompute = await page.evaluate(() => {
|
||||
let i = document.querySelector('.booking')?.__vueParentComponent
|
||||
while (i && !i.setupState?.rows) i = i.parent
|
||||
const ss = i.setupState
|
||||
const rows = ss.rows?.value ?? ss.rows
|
||||
const out = []
|
||||
for (let k = 0; k < 3; k += 1) {
|
||||
void ss.errorCount?.value
|
||||
if (rows?.length) rows[0].freight = Number(rows[0].freight) + 0.001
|
||||
const t0 = performance.now()
|
||||
void ss.errorCount?.value
|
||||
out.push(+(performance.now() - t0).toFixed(1))
|
||||
if (rows?.length) rows[0].freight = Number(rows[0].freight) - 0.001
|
||||
}
|
||||
return { rows: rows.length, cols: (ss.columns?.value ?? ss.columns)?.length, ms: out }
|
||||
})
|
||||
console.log('errorCount 重算（1000 行 × 22 列）:', JSON.stringify(recompute))
|
||||
|
||||
// 真实点击 → 输入 → 失焦提交 的端到端
|
||||
const e2e = await page.evaluate(async () => {
|
||||
const cont = document.querySelector('.stk-table')
|
||||
cont.scrollTop = 0
|
||||
await new Promise((r) => requestAnimationFrame(r))
|
||||
const tr = [...document.querySelectorAll('.stk-tbody-main tr')][2]
|
||||
// 找「备注」列（最右固定列）
|
||||
const tds = [...tr.querySelectorAll('td')]
|
||||
const td = tds[tds.length - 1]
|
||||
const r = td.getBoundingClientRect()
|
||||
const cx = r.left + r.width / 2
|
||||
const cy = r.top + r.height / 2
|
||||
const t0 = performance.now()
|
||||
for (const type of ['pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click']) {
|
||||
const Ctor = type.startsWith('pointer') ? PointerEvent : MouseEvent
|
||||
td.dispatchEvent(new Ctor(type, { bubbles: true, cancelable: true, clientX: cx, clientY: cy, button: 0 }))
|
||||
}
|
||||
let toEditor = -1
|
||||
const deadline = performance.now() + 3000
|
||||
while (performance.now() < deadline) {
|
||||
if (td.querySelector('.g3-table__cell-editor-root')) {
|
||||
toEditor = performance.now() - t0
|
||||
break
|
||||
}
|
||||
await new Promise((r2) => requestAnimationFrame(r2))
|
||||
}
|
||||
const input = td.querySelector('input')
|
||||
if (!input) return { toEditor: +toEditor.toFixed(1), error: 'no input' }
|
||||
input.focus()
|
||||
input.value = `${input.value}z`
|
||||
input.dispatchEvent(new Event('input', { bubbles: true }))
|
||||
const t1 = performance.now()
|
||||
input.blur() // 触发 commit + errorCount 重算
|
||||
await new Promise((r2) => requestAnimationFrame(r2))
|
||||
await new Promise((r2) => setTimeout(r2, 0))
|
||||
return {
|
||||
toEditorMs: +toEditor.toFixed(1),
|
||||
commitMs: +(performance.now() - t1).toFixed(1),
|
||||
}
|
||||
})
|
||||
console.log('端到端（点击→编辑器 / 失焦提交）:', JSON.stringify(e2e))
|
||||
|
||||
await browser.close()
|
||||
Reference in new issue
Block a user