长文页面有 60 多个区块,输入一个字要等 1.5 到 2 秒才出现,滚动时右侧设置面板一直重绘,标签页 CPU 占到 90%。第一次遇到会往复杂处想,其实漏掉的多是个小前提。

document.querySelectorAll('.wp-block').length
// 控制台里数一遍 超过 50 就考虑拆分

每个区块在编辑器里都是独立的组件,属性变化会触发整页重算。嵌套的组区块越深,重算范围越大,浏览器插件注入的脚本还会再放大开销。这一点先确认清楚,后面就不用反复试。

「区块过多编辑器卡顿」相关的验证我通常做两遍,改完一次、隔天再看一次,确认不是临时生效。把复现步骤压到三条以内,交给同事也能跑出来,才算真的定位清楚。

改动写完就同步给同事,下一个人踩同一个坑,成本还是你的。

具体做法是,把连续段落合并 区块总数控制在 30 个以内;逐个停用编辑器插件 对比输入延迟找出最贵的那个;确实要长页面就拆成多页 别一屏堆完。

改完照着核一遍,输入一个字的响应回到 100 毫秒以内,滚动设置面板不再闪烁。

作者 9823189