文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

浏览器的五种 Observer,你用过几种?

2024-12-02 07:52

关注

那么对于一些不是由用户直接触发的事件呢?比如元素从不可见到可见、元素大小的改变、元素的属性和子节点的修改等,这类事件如何监听呢?

浏览器提供了 5 种 Observer 来监听这些变动:MutationObserver、IntersectionObserver、PerformanceObserver、ResizeObserver、ReportingObserver。

我们分别来看一下:

IntersectionObserver

一个元素从不可见到可见,从可见到不可见,这种变化如何监听呢?

用 IntersectionObserver。

IntersectionObserver 可以监听一个元素和可视区域相交部分的比例,然后在可视比例达到某个阈值的时候触发回调。

我们准备两个元素:

id="box1">BOX111

id="box2">BOX222

加上样式:

#box1,#box2 {
width: 100px;
height: 100px;
background: blue;
color: #fff;

position: relative;
}
#box1 {
top: 500px;
}
#box2 {
top: 800px;
}

这两个元素分别在 500 和 800 px 的高度,我们监听它们的可见性的改变。

const intersectionObserver = new IntersectionObserver(
function (entries) {
console.log('info:');
entries.forEach(item => {
console.log(item.target, item.intersectionRatio)
})
}, {
threshold: [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 可以监听对元素的属性的修改、对它的子节点的增删改。

我们准备这样一个盒子:

id="box">

加上样式:

 #box {
width: 100px;
height: 100px;
background: blue;

position: relative;
}

就是这样的:

我们定时对它做下修改:

setTimeout(() => {
box.style.background = 'red';
},2000);

setTimeout(() => {
const dom = document.createElement('button');
dom.textContent = '东东东';
box.appendChild(dom);
},3000);

setTimeout(() => {
document.querySelectorAll('button')[0].remove();
},5000);

2s 的时候修改背景颜色为红色,3s 的时候添加一个 button 的子元素,5s 的时候删除第一个 button。

然后监听它的变化:

const mutationObserver = new MutationObserver((mutationsList) => {
console.log(mutationsList)
});

mutationObserver.observe(box, {
attributes: true,
childList: true
});

创建一个 MutationObserver 对象,监听这个盒子的属性和子节点的变化。

浏览器跑一下:

可以看到在三次变化的时候都监听到了并打印了一些信息:

第一次改变的是 attributes,属性是 style:

第二次改变的是 childList,添加了一个节点:

第三次也是改变的 childList,删除了一个节点:

都监听到了!

这个可以用来做什么呢?比如文章水印被人通过 devtools 去掉了,那么就可以通过 MutationObserver 监听这个变化,然后重新加上,让水印去不掉。

当然,还有很多别的用途,这里只是介绍功能。

除了监听元素的可见性、属性和子节点的变化,还可以监听大小变化:

ResizeObserver

窗口我们可以用 addEventListener 监听 resize 事件,那元素呢?

元素可以用 ResizeObserver 监听大小的改变,当 width、height 被修改时会触发回调。

我们准备这样一个元素:

id="box">

添加样式:

#box {
width: 100px;
height: 100px;
background: blue;
}

在 2s 的时候修改它的高度:

const box = document.querySelector('#box');

setTimeout(() => {
box.style.width = '200px';
}, 3000);

然后我们用 ResizeObserver 监听它的变化:

const resizeObserver = new ResizeObserver(entries => {
console.log('当前大小', entries)
});
resizeObserver.observe(box);

在浏览器跑一下:

大小变化被监听到了,看下打印的信息:

可以拿到元素和它的位置、尺寸。

这样我们就实现了对元素的 resize 的监听。

除了元素的大小、可见性、属性子节点等变化的监听外,还支持对 performance 录制行为的监听:

PerformanceObserver

浏览器提供了 performance 的 api 用于记录一些时间点、某个时间段、资源加载的耗时等。

我们希望记录了 performance 那就马上上报,可是怎么知道啥时候会记录 performance 数据呢?

用 PeformanceObserver。

PerformanceObserver 用于监听记录 performance 数据的行为,一旦记录了就会触发回调,这样我们就可以在回调里把这些数据上报。

比如 performance 可以用 mark 方法记录某个时间点:

performance.mark('registered-observer');

用 measure 方法记录某个时间段:

performance.measure('button clicked', 'from', 'to');

后两个个参数是时间点,不传代表从开始到现在。

我们可以用 PerformanceObserver 监听它们:





src="https://p9-passport.byteacctimg.com/img/user-avatar/4e9e751e2b32fb8afbbf559a296ccbf2~300x300.image" />



创建 PerformanceObserver 对象,监听 mark(时间点)、measure(时间段)、resource(资源加载耗时) 这三种记录时间的行为。

然后我们用 mark 记录了某个时间点,点击 button 的时候用 measure 记录了某个时间段的数据,还加载了一个图片。

当这些记录行为发生的时候,希望能触发回调,在里面可以上报。

我们在浏览器跑一下试试:

可以看到 mark 的时间点记录、资源加载的耗时、点击按钮的 measure 时间段记录都监听到了。

分别打印了这三种记录行为的数据:

mark:

图片加载:

measure:

用了这些数据,就可以上报上去做性能分析了。

除了元素、performance 外,浏览器还有一个 reporting 的监听:

ReportingObserver

当浏览器运行到过时(deprecation)的 api 的时候,会在控制台打印一个过时的报告:

浏览器还会在一些情况下对网页行为做一些干预(intervention),比如会把占用 cpu 太多的广告的 iframe 删掉:

会在网络比较慢的时候把图片替换为占位图片,点击才会加载:

这些干预都是浏览器做的,会在控制台打印一个报告:

这些干预或者过时的 api 并不是报错,所以不能用错误监听的方式来拿到,但这些情况对网页 app 来说可能也是很重要的:

比如我这个网页就是为了展示广告的,但浏览器一干预给我把广告删掉了,我却不知道。如果我知道的话或许可以优化下 iframe。

比如我这个网页的图片很重要,结果浏览器一干预给我换成占位图了,我却不知道。如果我知道的话可能会优化下图片大小。

所以自然也要监听,所以浏览器提供了 ReportingObserver 的 api 用来监听这些报告的打印,我们可以拿到这些报告然后上传。

const reportingObserver = new ReportingObserver((reports, observer) => {
for (const report of reports) {
console.log(report.body);//上报
}
}, {types: ['intervention', 'deprecation']});

reportingObserver.observe();

ReportingObserver 可以监听过时的 api、浏览器干预等报告等的打印,在回调里上报,这些是错误监听无法监听到但对了解网页运行情况很有用的数据。

文中的代码上传到了 github:https://github.com/QuarkGluonPlasma/browser-api-exercize

总结

监听用户的交互行为,我们会用 addEventListener 来监听 click、mousedown、keydown、input 等事件,但对于元素的变化、performance 的记录、浏览器干预行为这些不是用户交互的事件就要用 XxxObserver 的 api 了。

浏览器提供了这 5 种 Observer:

这些 api 相比 addEventListener 添加的交互事件来说用的比较少,但是在特定场景下都是很有用的。

浏览器的 5 种 Observer,你用过几种呢?在什么情况下用到过呢?

来源:神光的编程秘籍内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯