浏览器观察者 Observer API

最新推荐文章于 2024-03-30 10:36:08 发布

杨颖宽

最新推荐文章于 2024-03-30 10:36:08 发布

阅读量694

点赞数 13

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/yangyingkuan/article/details/136193179

版权

本文介绍了浏览器中的四种观察者API：IntersectionObserver用于检测元素是否在视窗可见，MutationObserver监控DOM变化，Resize Observer监听元素尺寸变化，Performance Observer优化性能监控。这些API在无限滚动、图片懒加载、性能优化等方面有广泛应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

随着浏览器的发展，现代浏览器支持四种不同类型的观察者。

1.Intersection Observer 交叉观察者

2.Mutation Observer 变动观察者

3.Resize Observer 视图观察者

4.Performance Observer 性能观察者

用途：

1.IntersectionObserver 观察一个元素是否在视窗可见。

一共有三个方法 observe() 指定一个观察者
disconnect() 停止所有目标监听
takeRecords()

基本使用

const options = {
    root: document.querySelector('.scrollContainer'),
    rootMargin: '0px',
    threshold: [0.3, 0.5, 0.8, 1] 
  }

const observer = new IntersectionObserver(handler, options)

const target = document.querySelector(“.targetBox”); 

observer.observe(target);

function handler (entries, observer) { 
    entries.forEach(entry => { 
    // 每个成员都是一个IntersectionObserverEntry对象。
    // 举例来说，如果同时有两个被观察的对象的可见性发生变化，entries数组就会有两个成员。
    // entry.boundingClientRect  目标元素的位置信息
    // entry.intersectionRatio  目标元素的可见比例
    // entry.intersectionRect 交叉部分的位置信息
    // entry.isIntersecting 
    // entry.rootBounds 根元素的位置
    // entry.target 
    // entry.time  时间戳
    }); 
}

主要应用于：

1. 无限滚动
2. 图片懒加载
3. 兴趣埋点
4. 控制动画/视频执行（性能优化）

2.MutationObserver 观察DOM中的变化

接口提供了监视对DOM树所做更改的能力。它被设计为旧的MutationEvents功能的替代品，该功能是DOM3 Events规范的一部分。

优势：

MutationEvents事件是同步触发，也就是说，DOM 的变动立刻会触发相应的事件；
Mutation Observer 则是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。
可以通过配置项，监听目标DOM下子元素的变更记录

基本使用

创建观察者

let observer = new MutationObserver(callback);

定义回调

function callback (mutations, observer) {
    //第一个是变动数组
    //第二个是观察器实例
  mutations.forEach(function(mutation) {
    console.log(mutation);
  });
});

定义要观察的目标对象

observer.observe(targetNode, config)

停止观察

observer.disconnect()

3.`ResizeObserver` 视图观察者

ResizeObserver API是一个新的JavaScript API，与IntersectionObserver API非常相似，它们都允许我们去监听某个元素的变化。

出现的意义

开发过程当中经常遇到的一个问题就是如何监听一个 div 的尺寸变化。
但众所周知，为了监听 div 的尺寸变化，都将侦听器附加到 window 中的 resize 事件。
但这很容易导致性能问题，因为大量的触发事件。
换句话说，使用 window.resize 通常是浪费的，因为它告诉我们每个视窗大小的变化，而不仅仅是当一个元素的大小发生变化。
而且resize事件会在一秒内触发将近60次，很容易在改变窗口大小时导致性能问题

基本使用

let observer = new ResizeObserver(callback);


const callback = entries => {
    entries.forEach(entry => {
        
    })
}
每一个entry都是一个对象，包含两个属性contentRect和target


定义要观察的目标对象
observer.observe(document.body)


取消单节点观察
observer.unobserve(document.body)

取消所有节点观察
observer.disconnect(document.body)