用途
该技能用于审计与「减少 DOM 大小与复杂度」相关的性能问题，适用于排查页面加载缓慢、资源过重或渲染延迟的场景。其核心目标是控制 DOM 规模，因为过大的 DOM 会增加内存占用、拖慢样式计算，并使布局重排代价更高，最终导致交互性能变差。
主要能力
技能提供以下能力：
- 快速参考标准：总 DOM 节点数保持在 1500 以下；避免过深嵌套，最大深度小于 32；对长元素列表使用虚拟化。
- 检查（Check）：使用 Lighthouse 或 Chrome DevTools 检查 DOM 节点总数与最大 DOM 深度。
- 修复（Fix）：简化 HTML 结构，移除不必要的包裹元素，并为大型列表实现虚拟化。
- 解释（Explain）：说明庞大 DOM 树对内存与渲染速度的性能影响。
- 代码审查（Code Review）：审查影响「减少 DOM 大小与复杂度」的路由、资源与加载行为，标记出增加不必要网络、CPU 或布局成本的具体文件、请求或渲染步骤，并描述用于确认问题的测量方法。
使用方式
在审计页面性能时，可先依据快速参考标准判断 DOM 规模是否超标，再通过 Lighthouse 或 Chrome DevTools 获取 DOM 节点总数与最大深度数据，确认瓶颈后按修复建议调整结构或引入虚拟化。代码审查环节可结合具体路由、资源与加载行为定位问题。完整实现细节、代码示例与框架相关指导，参见 references/rule.md。规则页面为 https://frontendchecklist.io/rules/performance/dom-size。
适用场景
适用于前端性能审计、页面加载与渲染优化、交互性能排查，以及代码审查中识别 DOM 结构相关的性能成本。
限制
资料未提供该技能的具体安装命令、支持的框架清单、收费方式或价格信息，这些内容暂未提供。