五种浏览器观察器你用过几个？

时间：2023-03-13 11:24:25 科技观察

在Web开发中，我们经常要处理用户交互。我们会使用addEventListener来添加事件监听器来监听用户的各种操作，比如click、mousedown、mousemove、input等，这些都是用户直接触发的事件。那么一些不是由用户直接触发的事件呢？比如元素永远不可见，元素大小发生变化，元素的属性和子节点的修改等，这些事件如何监控？浏览器提供了5个Observer来监听这些变化：MutationObserver、IntersectionObserver、PerformanceObserver、ResizeObserver、ReportingObserver。我们分别来看一下：IntersectionObserver一个元素从不可见到可见，从可见到不可见，如何监听这个变化？使用IntersectionObserver。IntersectionObserver可以监控一个元素的交集与可见区域的比例，然后当可见比例达到一定阈值时触发回调。我们准备两个元素：BOX111

BOX222

加上样式：#box1,#box2{width:100px;高度：100px；背景：蓝色；颜色：#fff；position:relative;}#box1{top:500px;}#box2{top:800px;}这两个元素分别在500和800px的高度，我们监测它们的可见性变化。constintersectionObserver=newIntersectionObserver(function(entries){console.log('info:');entries.forEach(item=>{console.log(item.target,item.intersectionRatio)})},{阈值:[0.5,1]});intersectionObserver.observe(document.querySelector('#box1'));intersectionObserver.observe(document.querySelector('#box2'));创建一个IntersectionObserver对象，监听box1和box2两个元素，当可见比例达到0.5和1时触发回调。运行浏览器：可以看到元素box1和box2在可见范围达到一半（0.5）时触发回调和完整的(1)分别。这有什么用？这非常有用。我们在做一些数据采集的时候，想知道某个元素是否可见，什么时候可见。我们可以通过这个api来监控和做图片的懒加载，当视觉比例达到一定比例时就可以触发加载。除了监控元素的可见性，还可以监控元素属性和子节点的变化：MutationObserver监控一个普通的JS对象的变化，我们会使用Object.defineProperty或者Proxy:，监控元素属性和子节点的变化节点，我们可以使用MutationObserver：MutationObserver可以监听元素属性的修改，及其子节点的增删改查。我们准备了这样一个盒子：

加上样式：#box{width:100px;高度：100px；背景：蓝色；position:relative;}就是这样：我们定期修改它：setTimeout(()=>{box.style.background='red';},2000);setTimeout(()=>{constdom=document.createElement('button');dom.textContent='dongdongdong';box.appendChild(dom);},3000);setTimeout(()=>{document.querySelectorAll('button')[0].remove();},5000);在2秒时，将背景颜色更改为红色，在3秒时，添加按钮子元素，在5秒时，删除第一个按钮。然后监控它的变化：constmutationObserver=newMutationObserver((mutationsList)=>{console.log(mutationsList)});mutationObserver.observe(box,{attributes:true,childList:true});创建一个MutationObserver对象并监听盒子的属性和子节点的变化。运行浏览器：可以看到它在三次变化的过程中监听并打印了一些信息：第一次变化是attributes，属性是style：第二次变化是childList，增加了一个节点：第三次也是一个改变的childList，一个节点被删除：它都被监控了！这有什么用？比如一篇文章的水印是通过devtools去掉的，那么你可以通过MutationObserver监测这个变化，然后重新添加，让水印去掉。失去。当然还有很多其他的用途，这里只是介绍一下功能。除了监听元素的可见性、属性和子节点的变化，还可以监听尺寸的变化：我们可以使用addEventListener监听ResizeObserver窗口中的resize事件。元素呢？元素可以使用ResizeObserver来监控尺寸变化。当修改宽高时，会触发回调。我们准备这样一个元素：