IntersectionObserver带来X%的性能提高

时间 2019-11-08

标签 intersectionobserver 带来 x% 性能提高栏目系统性能繁體版

原文原文链接

原文，zhuanlan.zhihu.com/p/88767748。css

前言

广告打点和图片懒加载是两个很是常见的需求，最简单的实现方式经过监听scroll事件，可是你们都知道scroll事件的监听回调是同步执行的，这样就会影响JS主线程的UI渲染。而咱们的主角IntersectionObserver即将登场。文章里用observer代替IntersectionObserver。html

首先来一段官方宣言（MDN），ios

Intersection Observer API提供了一种异步观察目标元素与祖先元素或者顶级文档viewport的交集中的变化的方法。git

重点：异步，交集，变化。github

用途

再来一段官方宣言（MDN）介绍它的用途。若是你们对我引用官方描述不满意的话，这里有地址能够直接查看，Intersection Observer APIapi

当页面滚动时，懒加载图片或其余内容。
实现“可无限滚动”网站，也就是当用户滚动网页时直接加载更多内容，无需翻页。
为计算广告收益，检测其广告元素的曝光状况。
根据用户是否已滚动到相应区域来灵活开始执行任务或动画。

用法

它的用法也很简单。数组

const callback = entries => {  
// ...  
}; 
 
const options = {  
  root: document.querySelector('#scroll'),
  rootMargin: '0px',  
  threshold: [0]  
};  

const observer = new IntersectionObserver(callback, options);  

const ele = document.querySelector('.img');  

observer.observe(ele); 
复制代码

root 目标元素所在的容器节点，若是不指定根节点，默认文档为根节点。异步

rootMargin 围绕根元素的边距，相似于css的margin属性。注意这个单位为px性能

threshold 相交的比例，既能够是一个数字也能够是一个数组。取值在0-1之间。测试

const callback = (entries, observer) => {   
  entries.forEach(entry => {  
    //   entry.boundingClientRect  
    //   entry.intersectionRatio  
    //   entry.intersectionRect  
    //   entry.isIntersecting  
    //   entry.rootBounds  
    //   entry.target  
    //   entry.time  
  });  

};
复制代码

entry.boundingClientRect 目标元素的区域信息，getBoundingClientRect()的返回值

entry.intersectionRatio 目标元素的可见比率

entry.intersectionRect 目标元素与根元素交叉的区域信息

entry.isIntersecting 是否进入可视区域

entry.rootBounds 根元素的矩形区域信息

entry.target 被观察的目标，是一个DOM节点

entry.time 可见性发生变化的时间,相交发生时距离页面打开时的毫秒数.精度为微秒。

上面一段基本也是基原本自于MDN的解释，你问我这篇文章作了什么，对，我就是copy&paste搬运工。

可执行方法

observe，建立一个观察对象。

const target = document.querySelector('#listItem');  
observer.observe(target);  
复制代码

unobserver，取消观察对象。

observer.unobserve(target);
复制代码

takeRecords，返回一个IntersectionObserverEntry对象数组。

const records = observer.takeRecords(); 
复制代码

每一个对象的目标元素都包含每次相交的信息。takeRecords是同步的，IntersectionObserver的回调是异步的，且IntersectionObserver的回调时间最大是100ms，因此回调会在1-100ms内执行。若是执行了异步回调，takeRecords()就会返回空数据组，若是同步先执行，则回调不执行。使用场景较少。

disconnect，终止对全部目标元素可见性变化的观察。

observer.disconnect(); 
复制代码

从scroll切换observer

github.com/carrollcai/…

上面是我写的一个Demo，scroll和observer实现相同的元素出如今试视图，执行回调的效果。

下面我简单作一个实验，实现图片预加载。若是B距离根文档还有300px，那就与根文档造成交集。代码以下

<body>
  <A>
    <div style="height: 100vh; width: 100%"></div>
    <B></B>
  </A>
</body>
复制代码

const callback = entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('B相交了');
    }
  })
}

const options = {
  rootMargin: '0px 0px 300px 0px'
}

const ob = new IntersectionObserver(callback, options);
ob.observe(B);
复制代码

当observer没有设置root，默认根文档就是观察区域。若是这时你设置A为滚动区间（overflow: auto; height: 100vh），它就会造成一个独立的层，这会直接致使rootMargin失效，由于rootMargin为0px 0px 300px 0px时，只是将root的下边界增长300px，而A已经造成本身的BFC（这里是个人理解，有错误请指出），因此rootMargin的设置会失效。最好的办法是将A的滚动区间去掉，由于这样观察区域是根元素，js事件机制是先捕获再冒泡，在根元素上捕获和冒泡是同时发生的，等于没有这个过程，性能最优。最小的改动，是将观察区域root设置为A，这样rootMargin也能生效。我为何要举这个例子，由于我以前想实现预加载图片，即离窗口还有一段距离时，加载图片。我设置观察区域为根元素，可是观察目标的父层又设置了滚动区域，直接致使rootMargin失效，一度让我怀疑是API有问题，通过知乎一位大佬（id：紫云飞）帮助。它也写过一篇介绍observer的文章，2016年时写的。IntersectionObserver API。

性能测试

有一位大师说过，我懒得查名字了，you can't optimize what you can't measure。固然我也懒得作性能测试了，因此文章的标题，由IntersectionObserver带来100%的性能提高变成IntersectionObserver带来X%的性能提高，X可能为负。

总结

observer api安卓手机2016年就支持了，ios2018年末才支持，好在有polyfill。我已经在生产上使用这个api，目前道路畅通，暂无阻碍。

写做时间：20191027