最早接触 MutationObserve 这个 API，是在蓝湖工作的时候，在做用户行为采集系统，名字叫做 userview ，用户行为就在你眼前，是一个集行为采集、数据分析、自动埋点和场景还原等多功能为一体的平台。其中录制功能类似 rrweb 但那时候 rrweb 还很落后，对标产品是 fullstory。 以上产品，全部都基于一个关键技术实现，那就是今天的主角 MutationObserver，基于这个 API 的更多产品还在诞生，其中 fullstory 在疫情几年逆流而上完成几轮融资，可以说 MutationObserver 真正引爆了前端开发创造力。
基于笔者过去使用 MutationObserver 的经验总结:
简单介绍下 MutationObserver API 介绍多个应用场景 网站行为采集（rrweb、fullstory原理） 白屏检测 其他 Observer 的polyfill 编辑器自动保存 防止水印被删除 保护 DOM 结构（及时删除广告等） 表单验证 vue $nexttick 实时搜索和过滤 文本输入时做出反应 色块小游戏脚本 总结使用经验 提醒注意事项 文章约 7000 字，阅读时长 20 - 30 分钟，欢迎点赞收藏 简介
背景
MutationObserver 出现的时间是在 2012 年。它是在 W3C（World Wide Web Consortium） 的 DOM 规范的 Level 4 中被引入的。MutationObserver 的目标是解决传统的 DOM 变化监听方式的局限性和性能问题，并提供更高效、灵活的 DOM 变化监视机制。 在过去，开发人员使用 DOM 事件监听或定时器轮询的方式来监视 DOM 的变化。然而，这些方式都存在一些问题，如性能低下、无法捕捉细微变化等。为了解决这些问题，MutationObserver 被提出并引入到浏览器中，作为一种新的 DOM 变化监视的机制。 MutationObserver 的出现不仅满足了实时 DOM 监测的需求，还推动了前端开发的发展。它为开发者提供了更灵活、高效的解决方案，使得我们能够创造出更具交互性和动态性的 Web 应用程序。MutationObserver 的背景和诞生，正是对于前端领域需求的深思熟虑和创新突破的产物，为我们开启了实时 DOM 监测的全新时代。
使用说明
MDN 简介请点击 MutationObserver
简单摘要： 构造函数
MutationObserver() 创建并返回一个新的 MutationObserver 它会在指定的 DOM 发生变化时被调用。 方法
disconnect() 阻止 MutationObserver 实例继续接收的通知，直到再次调用其 observe() 方法，该观察者对象包含的回调函数都不会再被调用。 observe() 配置 MutationObserver 在 DOM 更改匹配给定选项时，通过其回调函数开始接收通知。 takeRecords() 从 MutationObserver 的通知队列中删除所有待处理的通知，并将它们返回到 MutationRecord 对象的新 Array 中。 基础使用示例如下：
// 选择需要观察变动的节点 const targetNode = document.getElementById('some-id');
// 观察器的配置（需要观察什么变动） const config = { attributes: true, childList: true, subtree: true };
// 当观察到变动时执行的回调函数 const callback = function(mutationsList, observer) { // Use traditional 'for loops' for IE 11 for(let mutation of mutationsList) { if (mutation.type === 'childList') { console.log('A child node has been added or removed.'); } else if (mutation.type === 'attributes') { console.log('The ' + mutation.attributeName + ' attribute was modified.'); } } };
// 创建一个观察器实例并传入回调函数 const observer = new MutationObserver(callback);
// 以上述配置开始观察目标节点 observer.observe(targetNode, config);
// 之后，可停止观察 observer.disconnect(); 兼容性
兼容性非常棒，是 Observer API 家族中兼容性最好的
