总结

1. Intersection Observer（交叉观察器）：
• 作用：用于监测目标元素与其祖先元素或视口之间的交叉状态。
• 使用场景：常用于实现懒加载、无限滚动、虚拟滚动、元素可见性检测等效果。

2. Mutation Observer（变动观察器）：
• 作用：用于监测DOM树中的变动，包括节点的添加、删除、属性的变化等。
• 使用场景：常用于监测DOM的动态变化，可以用于实时更新页面内容、自动保存表单数据等。

3. Resize Observer（尺寸观察器）：
• 作用：用于监测元素的尺寸变化，包括宽度、高度等属性的变化。
• 使用场景：常用于响应式布局、元素尺寸的自适应调整等。
• 可以用Mutation Observer代替。

4. Performance Observer（性能观察器）：
• 作用：用于监测浏览器性能指标，如页面加载时间、资源加载时间等。
• 使用场景：常用于分析页面性能、优化关键渲染路径等。

参考

JS中的观察者们 —— 四种 Observers | 前端学习笔记

前端大乱炖——web前端,HTML5,CSS3,Javascript,SVG,canvas,vue...

https://xiaotianxia.github.io/blog/vuepress/js/four_kinds_of_observers.html

IntersectionObserver 实现虚拟列表初探 - 掘金

前端开发中经常会遇到大数据量列表展示的性能问题，即大数据量一次性展示时前端渲染大量 Dom，触发渲染性能问题，造成初始加载白屏，交互卡顿等。解决这类问题的方案也有很多，使用虚拟列表展示是一个比较

https://juejin.cn/post/7158607083699437605