一个用 Elementor 搭的落地页,性能面板显示 DOM 节点 2417 个,首屏 LCP 4.8 秒,同一张设计稿手写 HTML 只有 380 个节点、1.6 秒。碰到这种情况,我一般先确认改动有没有真的生效。
原因不复杂,构建器给每个容器套了三层 div,图标和按钮又各自包一层,嵌套一深节点数就翻倍。页面里还留着十几个隐藏的旧区块,display:none 不减少 DOM,样式计算照样要遍历。
「构建器 DOM 冗余」相关的日志我一般连着看前后五分钟,单看一条报错经常判断不出是哪一步失败。报错里带路径的,先去看那个路径在不在、权限对不对。
document.querySelectorAll('*').length
// 控制台执行看实际节点数
// Performance 面板 Bottom-Up 看 Recalculate Style 耗时
同一份配置存在多处的,先确认改的是被加载的那一份。新版本先放一台机器上跑一天再全量,问题一般在这段时间暴露。
具体做法是,在 Lighthouse 里看 DOM 体积提示,先定位节点最多的区块;把隐藏的旧区块直接删掉,别用 display:none 留着;重复图标改用内联 SVG 减少包装层,改完再跑一次对比。
最后用这个标准收尾,节点数降到 900 以内,LCP 回到 2.2 秒左右,首屏滚动不再掉帧。
