原文，https://zhuanlan.zhihu.com/p/88767748。
前言
广告打点和图片懒加载是两个非常常见的需求，最简单的实现方式通过监听scroll事件，但是大家都知道scroll事件的监听回调是同步执行的，这样就会影响JS主线程的UI渲染。而我们的主角IntersectionObserver即将登场。文章里用observer代替IntersectionObserver。
首先来一段官方宣言（MDN），
Intersection Observer API提供了一种异步观察目标元素与祖先元素或者顶级文档viewport的交集中的变化的方法。
重点：异步，交集，变化。
用途
再来一段官方宣言（MDN）介绍它的用途。如果大家对我引用官方描述不满意的话，这里有地址可以直接查看，Intersection Observer API
- 当页面滚动时，懒加载图片或其他内容。
- 实现“可无限滚动”网站，也就是当用户滚动网页时直接加载更多内容，无需翻页。
- 为计算广告收益，检测其广告元素的曝光情况。
- 根据用户是否已滚动到相应区域来灵活开始执行任务或动画。
用法
它的用法也很简单。
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
https://github.com/carrollcai/scroll-demo
上面是我写的一个Demo，scroll和observer实现相同的元素出现在试视图，执行回调的效果。
视频里demo的效果。
下面我简单做一个实验，实现图片预加载。如果B距离根文档还有300px，那就与根文档形成交集。代码如下
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