IntersectionObserver
大家平时在做性能优化的时候，经常用到懒加载，那么就会用到window的scroll和setTimeOut等等，无非是要判断dom是否进入可是区域了，那么这api就是一个令人惊喜的东西了，它就是用来判断dom进入可视区域的
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
//初始化一个实例 var observer = new IntersectionObserver(changes => { for (const change of changes) { console.log(change.time); // Timestamp when the change occurred // 当可视状态变化时，状态发送改变的时间戳 // 对比时间为，实例化的时间， // 比如，值为1000时，表示在IntersectionObserver实例化的1秒钟之后，触发该元素的可视性变化 console.log(change.rootBounds); // Unclipped area of root // 根元素的矩形区域信息，即为getBoundingClientRect方法返回的值 console.log(change.boundingClientRect); // target.boundingClientRect() // 目标元素的矩形区域的信息 console.log(change.intersectionRect); // boundingClientRect, clipped by its containing block ancestors, // and intersected with rootBounds // 目标元素与视口（或根元素）的交叉区域的信息 console.log(change.intersectionRatio); // Ratio of intersectionRect area to boundingClientRect area // 目标元素的可见比例，即intersectionRect占boundingClientRect的比例， // 完全可见时为1，完全不可见时小于等于0 console.log(change.target); // the Element target // 被观察的目标元素，是一个 DOM 节点对象 // 当前可视区域正在变化的元素 } }, {}); // Watch for intersection events on a specific target Element. // 对元素target添加监听，当target元素变化时，就会触发上述的回调 observer.observe(target); // Stop watching for intersection events on a specific target Element. // 移除一个监听，移除之后，target元素的可视区域变化，将不再触发前面的回调函数 observer.unobserve(target); // Stop observing threshold events on all target elements. // 停止所有的监听 observer.disconnect(); |
除此之外，还有很多可以利用web自带api进行性能优化，慢慢发现。