用途
该技能用于在代码审查或开发过程中，识别并修复与「减少高成本 DOM 读写操作」相关的性能问题。它适用于审查脚本、客户端组件、打包产物以及浏览器运行时行为，核心目标是消除布局抖动（layout thrashing）并避免阻塞主线程。
主要能力
技能围绕以下快速参考要点展开：
- 不要交错进行 DOM 读取（如 offsetHeight、getBoundingClientRect）与 DOM 写入（如样式修改）。
- 先批量执行所有读取，再批量执行所有写入。
- 使用 requestAnimationFrame 处理视觉更新。
- 使用 DocumentFragment 或 innerHTML 进行批量 DOM 插入。
- 当更简单的 CSS 方案或降低频率的方式可行时，避免在多可见组件上逐帧更新 React 状态。
- 在不调用 preventDefault 的情况下，对 scroll、touch、wheel 使用 passive 监听器。
技能提供四种使用模式：
- 检查：识别代码中的布局抖动，即循环中交错 DOM 读写的位置；同时标记应设为 passive 的 scroll、touch、wheel 监听器，以避免阻塞主线程。
- 修复：重构代码，将所有 DOM 读取批量置于写入之前，消除强制同步布局；在不需要取消滚动时，将相关监听器标记为 passive。
- 解释：说明布局抖动的成因，以及批量读写如何防止它。
- 代码审查：审查与减少高成本 DOM 读写相关的脚本、客户端组件和浏览器执行路径，标记违反规则的具体导入、事件处理器、运行时副作用或阻塞操作，并说明如何在浏览器中验证改动。
使用方式
在需要审查或优化 DOM 读写性能时调用该技能，可选择检查、修复、解释或代码审查模式。技能会针对具体代码给出问题定位与修改建议。完整的实现细节、代码示例和框架相关指导见 references/rule.md。
适用场景
- 审查前端脚本、客户端组件或打包产物中的 DOM 操作性能。
- 排查动画卡顿、渲染缓慢等与布局抖动相关的问题。
- 检查事件监听器是否应设为 passive。
- 在代码审查流程中作为性能规则检查项。
限制
资料未提供该技能的具体安装命令、支持的框架版本、平台限制或收费信息，这些内容暂未提供。