动态页面应如何控制节点查询、变更监听与事件传播成本？

# 核心结论

动态页面应从查询结果语义、渲染流水线、监听范围和事件路径四个方面控制成本：一次性处理优先使用静态快照，需要随文档变化而更新时才使用实时集合；批量操作应先读布局、后写样式，避免读写交错；MutationObserver 应限制观察范围和变更类型；大量同构节点可在稳定祖先上采用事件委托。最终是否优化以及优化哪一部分，都应由性能轨迹、堆快照和真实交互指标决定，而不是仅凭节点数量判断。

# 底层机制

querySelector() 返回首个匹配元素，querySelectorAll() 返回创建时的静态 NodeList。后续新增的匹配节点不会自动进入这个列表。`getElementsByClas