DOM节点总数和嵌套深度可快速测量：document.querySelectorAll('*').length获取总节点数；右键元素→“Show DOM properties”查node.depth得真实深度；节点超2000或深度≥6易致layout耗时跃升至60ms+卡顿。
DOM节点总数和嵌套深度怎么快速测
不用靠肉眼数缩进或猜，直接在浏览器控制台跑两行脚本就行：document.querySelectorAll('*').length 给出总节点数；右键任意元素 → “Show DOM properties” 查 node.depth 值，这是唯一可靠深度指标。实测中，节点超2000或深度≥6，layout阶段耗时就容易跳变——Chrome里从15ms跃升到60ms+不是预警，是已卡顿。
模板里哪些冗余标签该删、哪些不能动
别凭“看起来没用”删，得看绑定和样式是否真实生效：
<div data-id="xxx">、<code><div class="block-wrapper-2024"> 这类 CMS/低代码导出的 wrapper，若无 JS 事件监听、无 CSS 规则匹配（用 <code>div[class]在 Styles 面板搜不到对应样式），直接删<div class=""> 空 wrapper 成组出现时（如 <code><div class="container"><div class=""></div></div>），它仍占内存、干扰选择器匹配，尤其当全局有*:hover时会拖慢伪类检查- 语义标签如
<main></main>、<section></section>不是“装饰”，它们默认不触发 UA 样式重置链，解析器有捷径，替换三层<div class="container"><div class="row"><div class="col"></div></div></div>可减节点数30% - 全局搜索并整行删除：
{{、{%、
模板引擎残留怎么批量清理
跨平台编译常把模板语法硬塞进最终 HTML，比如 {{header}}、{% include "footer.html" %}、@@include("nav.html")，它们不报错，但阻塞 DOM 构建顺序，SSR 场景下易引发隐性延迟。
