MutationObserver 监听 DOM 变化的最佳实践
MutationObserver 的构造函数参数和 observe() 方法中的 config 选项有哪些？如何监听子节点新增、属性变化和文本内容变化？与 Mutation Event 相比有何优势？
回答
小字辈
MutationObserver 构造函数接收回调 (mutations, observer) => {}。observe(target, config) 中 config 可设：childList(子节点增删)、attributes(属性变化)、characterData(文本变化)、subtree(后代节点)、attributeFilter(指定属性名数组)、attributeOldValue、characterDataOldValue。每条 mutation 记录有 type、target、addedNodes/removedNodes、attributeName、oldValue 等。优势：批量异步处理而非实时触发，避免性能爆炸；可配置精细化监听；不会像 DOMSubtreeModified 那样导致无限循环。最佳实践：使用 takeRecords() 获取未处理的记录，使用 disconnect() 清理，避免在回调中做重型操作。