渭南市网站建设_网站建设公司_表单提交_seo优化

一文讲清楚DOM动态观察器MutationObserver的原理和使用场景

1. 引出

• 前端的童鞋都应该了然一件事，不管是借助框架像vue/react/angular，还是原生开发，就是我们开发来开发去，操作来操作去，其实本质都是在对页面上的HTML内容进行CURD
• 那既然我们是在对HTML进行CURD，那我们是不是就可以对某个元素进行观察和监听，他是否发生了变化，从而做出相应的业务处理
• 比如我们在做前端的时候，有时候会加入一下三方框架，比如广告插件，我们原本想的是，你就只干你插件的事，不要给我变动我们页面本来的东西，结果呢，这个广告插件就是耍小聪明，偷偷往页面上插了一个button，引导用户点击跳转，从而实现引流
• 这可不是我能接受的，靠，我的流量怎么能跑你那边去了呢
• 又或者这个广告插件特么的可能因为商务关系不太好，给我的站点突然加了一个播放片子的视频，我靠，这可大方了
• 所以，我们要监测一下，这家伙有没有往页面上加东西，怎么检测呢，就用DOM动态观察器，MutationObserver
• 他能检测到DOM节点的详细变化，并且允许指定一个回调函数，在变化发生后回调执行，同时可以通过配置项，配置需要监测的内容，如下表

2. 原理

• 对设计模式比较了解的童鞋一眼就可以看出来，这是一个典型的观察者模式
• 观察者：MutationObserver
• 被观察者：目标DOM节点
• 触发逻辑：当被观察者的DOM发生指定类型的变化时，浏览器会将变化事件加入到微任务队列，带主线程空闲时，触发观察者的回调函数，传递变化详情
• 所以说，MutationObserver是异步的，属于微任务，浏览器会把短时间内的多次DOM变化合并为一次回调触发（采用防抖），避免频繁执行回调导致的性能问题
• 同时，因为MutationObserver是异步的，如果你想在Observer里面访问修改后的DOM状态，比如获取尺寸，需要包裹requestAnimationFrame
• 原理知道了，具体怎么用呢

3. 使用

• 分三步
• 第一步，创建observe
• 第二步，设置配置项，也就是你需要监听的类型
• 第三步，绑定目标DOM，开启监听
• 第四步，触发MutationObserve
• 第五步，关闭监听
• 上代码

<divid="target"class="unactive"></div><script>//第一步：创建MutationObserver实例，传入回调函数constobserver=newMutationObserver((mutationList,observer)=>{/** * mutationList是所有触发的DOM变化数组，每个元素都是一个MutationRecord对象 * observer是MutationObserver实例本身，用于关闭实例等操作 */for(constmutationofmutationList){ <