使用IntersectionObserver可以让我们快速实现延迟加载和虚拟列表。首先，我们创建一个观察者观察者实例。observer=newIntersectionObserver（回调，选项）；options是配置参数（可选）)observer是一个带有一些基本方法的观察者实例//开始观察observer.observe(document.getElementById('example'));//停止观察observer.unobserve(element);//关闭观察者observer.disconnect();callback回调函数回调函数会在被观察元素开始进入窗口或完全离开窗口时触发回调函数。回调函数的参数（entries）是一个数组，每个成员是一个IntersectionObserverEntry对象IntersectionObserverEntry对象IntersectionObserverEntry用于提供Target元素信息，一共有6个属性{time:3893.92,rootBounds:ClientRect{bottom:920,height:1024,left:0,right:1024,top:0,width:920},boundingClientRect/ClientRect/...},intersectionRect:ClientRect{//...},intersectionRatio:0.54,target:element}time：可见性发生变化的时间，是一个高精度的时间戳，单位为毫秒target：observed目标元素是一个DOM节点对象rootBounds：根元素的矩形区域信息，getBoundingClientRect的返回值()方法，如果没有根元素（即直接相对视口滚动），则返回nullboundingClientRect：目标元素信息inter的矩形区域sectionRect：目标元素与视口（或根元素）相交区域的信息intersectionRatio：目标元素的可见比例，即intersectionRect与boundingClientRect的比例，完全可见时为1，以及完全不可见时小于或等于0。OptionobjectIntersectionObserverconstructor第二个参数是一个配置对象，可以设置如下属性。阈值属性确定何时触发回调函数。是一个数组，每个成员是一个阈值，默认为[0]，即交集比（intersectionRatio）达到0时触发回调函数newIntersectionObserver(entries=>{/*...*/},{threshold:[0,0.25,0.5,0.75,1]});//当目标元素为0%、25%、50%、75%、100%可见时，回调函数根rootMargin为较少使用warningIntersectionObserverAPI是异步的，不会随着目标元素的滚动同步触发。规范中规定IntersectionObserver的实现应该使用requestIdleCallback()，即观察者只有在线程空闲时才会执行。这意味着这个观察者的优先级很低，只有在其他任务执行完毕后浏览器空闲时才会执行livedemocode，通用性更强，但是可能存在监听滚动的性能问题。同时IntersactionObserver可以在不监听滚动的情况下实现虚拟列表的效果，实现滚动动画，解决快速滚动白屏的问题github/vue-virtual-list-observervue-virtual-list-observer-npm(npmjs.com）参考：阮一峰IntersactionObserverMDN
