MENU前言IntersectionObservervisibilitychange总结前言IntersectionObserver和visibilitychange是两种不同的Web API它们用于处理页面元素的可见性问题但它们的工作方式和用途有所不同。IntersectionObserver介绍IntersectionObserver是一种更现代、更高效的API用于检测一个元素是否进入浏览器的可视区域。它允许观察元素与视口或其他元素的交叉情况并在交叉状态发生变化时执行回调函数。高效性与传统的滚动或重排事件相比IntersectionObserver使用更少的资源因为它不会在每次滚动时触发而是基于浏览器的内部机制来异步触发。灵活性可以观察多个元素相对于一个或多个根元素的交叉情况。用途适用于懒加载图片、视频、无限滚动列表等场景也可以用于检测元素是否进入视口以执行某些操作。案例假设正在开发一个图片密集型的网页如在线画廊或商品展示页。为提高页面加载速度希望只在图片即将进入视口时才加载它们。这时IntersectionObserver就非常有用。// 获取所有图片元素constimagesdocument.querySelectorAll(img[data-src]);// 创建IntersectionObserver实例constobservernewIntersectionObserver((entries,observer){entries.forEach(entry{if(entry.isIntersecting){// 当图片进入视口时替换src属性加载图片constimgentry.target;img.srcimg.dataset.src;img.classList.remove(lazy-load);// 停止观察已加载的图片observer.unobserve(img);}});});// 观察所有图片元素images.forEach(img{observer.observe(img);});在这个例子中首先选取所有带data-src属性的图片元素然后创建一个IntersectionObserver实例来监视这些图片。当图片进入视口时将其src属性设置为data-src的值并从DOM中移除lazy-load类同时停止观察该图片。visibilitychange介绍visibilitychange事件是较早的API用于监听文档的可见性状态变化。当用户切换标签页或最小化浏览器窗口时会触发这个事件。简单性它只提供页面是否可见的基本信息没有提供元素级别的可见性检测。用途适用于需要在页面可见或不可见时执行全局操作的场景如暂停视频播放、停止动画等。普通案例假设正在开发一个视频播放网站希望在用户切换到其他标签页时暂停视频播放以节省资源。这时visibilitychange事件就非常适用。document.addEventListener(visibilitychange,(){constvideodocument.querySelector(video);if(document.visibilityStatehidden){// 当页面不可见时暂停视频video.pause();}else{// 当页面可见时继续播放视频video.play();}});在例子中我们监听visibilitychange事件当事件触发时检查document.visibilityState的值。如果页面不可见(即用户切换到其他标签页或最小化浏览器)则暂停视频如果页面可见则继续播放视频。vue案例生命周期mounted(){document.addEventListener(visibilitychange,this.runVisibilityChange);},unmounted(){document.removeEventListener(visibilitychange,this.runVisibilityChange);}方法methods:{runVisibilityChange(){constvideothis.$refs.courseVideo;constVSdocument.visibilityState;VShidden?video.pause():video.play();}}总结性能IntersectionObserver更高效因为它不会在每次滚动时触发而是基于浏览器的内部机制来异步触发。功能IntersectionObserver提供更细粒度的控制可以检测单个元素的可见性而visibilitychange只能提供整个页面的可见性状态。适用场景如果需要检测单个元素是否进入视口或者需要在元素可见性变化时执行操作IntersectionObserver是更好的选择。如果只需要知道页面是否可见以便执行一些全局操作visibilitychange就足够。在实际应用中可以根据具体需求选择合适的API。例如如果正在开发一个视频播放器并希望在用户切换标签页时暂停视频使用visibilitychange就足够。如果需要实现图片懒加载或无限滚动列表IntersectionObserver将是更合适的选择。