原文：www.hweaver.com/intersectio…
现代网站重度依赖 scroll 事件并不是什么秘密了。滚动可以触发图片懒加载或延迟请求数据、初始化动画、支持无尽内容的加载，如此等等。糟糕的是这些 scroll 事件都不太可靠，也都是资源消耗大户。这在实现效果方面引起了问题，也常常让浏览器不堪重负。
作为一种处理 scroll 事件的新方式，交集观察者（Intersection Observer API） 应运而生。该 API 允许用户观察指定元素 A，并监视其与特定元素 B （或浏览器视口）的 交集（intersection） 状态。
既有的实现究竟有何问题？考虑一个当下典型的站点页面，有很多 scroll 事件在发生 -- 广告模块、从底部滚动进来的新内容、时不时需要运行动画的元素，或是页面中的很多图片，都会滚动至被用户看到后才会加载或执行。这些 scroll 事件关联了无数的循环调用方法，其中不乏比如需要获得必要位置信息的 Element.getBoundingClientRect() 等等，都是性能敏感的。
这些方法都运行在主线程中，这意味着一个地方出现问题就会殃及所有事情。Intersection Observer API 让浏览器免于应付交集事件，通过使用关联特定元素的交集状态的回调函数取而代之。浏览器可以更有效地管理这些事件，性能也得到了优化。
需要注意的是浏览器兼容性，截至本文被翻译时的统计如下：
概念 & 基本用法
为了完全理解为何 Intersection Observer API 更益于性能，先来看看基础知识。
IntersectionObserver 定义
定义一个 Intersection Observer 实例时，有一些关键的术语。
根（root） 指的是等待一个对象与其产生交集的某个元素。默认来说，就是浏览器视口（viewport），但任何合法的元素都是可以使用的。
除了以 root 作为一个单独 IntersectionObserver 的基础，观察者还可以监视许多不同的 目标（target）。目标也可能是任意合法的元素，当任何一个目标和根元素发生交集时，观察者会触发一个回调函数。
基本用法
建立一个简单的 IntersectionObserver 非常方便。首先调用 IntersectionObserver构造器，并向其传入一个回调函数和一个预设的选项：
const options = {
root: document.querySelector('#viewport'),
rootMargin: '0px',
threshold: 1.0
};
const observer = new IntersectionObserver(callback, options);
如上所示，选项中有一些可用的属性：
root
用来检查是否和目标元素发生交集的根元素。该选项接受任何合法元素，但是根元素必须是目标元素的祖先，这一点很重要。如果不指定根元素，或设为 null，则浏览器视口就作为默认的根元素。
rootMargin
该属性被用来扩展或缩减根元素的尺寸。接受和 CSS 中的 margin 相同格式的值，比如一个单独的值 10px 或定义不同边的多个值 10px 11% -10px 25px。
threshold
最后，threshold（译注：阈yù值）选项指定了一个最小量，表示目标元素和根元素交集时，其自身满足该最小量才会触发回调。取值为
0.0 – 1.0 之间的一个浮点数，所以 75% 左右的交集率应该写成 0.75。如果希望在多个点触发回调，也可以传入一个值的数组，如 [0.33, 0.66, 1.0]。
一旦 IntersectionObserver 实例被创建，剩下所要做的就是提供一个或多个目标元素以供观察：
const target = document.querySelector('#target');
observer.observe(target);
从此，回调函数将会在目标（或多目标）接近交集阈值的时刻被触发。
const callback = function(entries, observer) {
entries.forEach((entry) => {
// 在这干点什么
});
}
交集的计算
理解交集如何计算是重要的。首先，Intersection Observer API 将任意物体都视为矩形以便计算。这些矩形在包含目标内容的前提下，将被尽可能小的计算。
对于根元素，基于 rootMargin 的值考虑其矩形边界，这个值会填充或减小根元素的尺寸。
最后至关重要的是，要理解不同于传统 scroll 事件的是，Intersection Observer 并不是在每次交集改变后不间断地轮询。相反，回调只在阈值大约达到时被调用。如果需要多次检测，提供多个阈值就行了。
Demo 1 – 动画
在第一个小项目中，我们用一种简单的方式来看看 Intersection Observer API。
// 动画回调函数
const scrollImations = (entries, observer) => {
entries.forEach((entry) => {
console.log(111, entry.isIntersecting, entry.intersectionRatio);
if(entry.isIntersecting && entry.intersectionRatio >= 1) {
// 完全看到元素时
entry.target.classList.add('box--visible');
} else {
entry.target.classList.remove('box--visible');
}
});
}
// 创建观察者
const options = {
threshold: 1.0,
};
const observer = new IntersectionObserver(scrollImations, options);
// 指定观察目标
const boxes = document.querySelectorAll('.box');
boxes.forEach((box) => {
observer.observe(box);
});
向下滚动，一系列元素会出现。用一个 IntersectionObserver 实例监视 3 个目标元素。当它们完全进入视口（root）后，向目标元素上附加一个样式类名，触发对应的 CSS 动画。
Demo 2 – 页内导航
对于单页中随着滚动、相应某个区域的出现而高亮的导航条，Intersection Observer 是很适用的。
// 初始化观察者
const options = {
threshold: 0.45
}
const observer = new IntersectionObserver(changeNav, options);
// 指定目标元素
const sections = document.querySelectorAll('section');
sections.forEach((section) => {
observer.observe(section);
});
changeNav() 回调函数简单的检查目标 section 元素是否足够多的出现在屏幕上，然后恰当地指定样式类名。
const changeNav = (entries, observer) => {
entries.forEach((entry) => {
// 检查元素发生了碰撞
if(entry.isIntersecting && entry.intersectionRatio >= 0.55) {
// 删除旧的 active 样式类
document.querySelector('.active').classList.remove('active');
// 取得满足条件的目标元素 id
var id = entry.target.getAttribute('id');
// 找到匹配的元素并添加类名
var newLink = document.querySelector(`[href="#${id}"]`).classList.add('active');
}
});
}
浏览器支持 & Polyfill
对于尚不支持该特性的浏览器，有 polyfill 很好的填补了空白。官方的代码和文档可以在这里找到： github.com/w3c/Interse…
更简单的方法是适用 polyfill.io (polyfill.io)。可以单独指定需要加载的 Polyfill，且满足条件的浏览器才会加载。这可以保证页面的轻量，同时又不用过多配置。其用法如下：
<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
一旦 polyfill 被加载，以上 demos 就能在 Safari、IE7+ 等浏览器上运行了。
总结
如你所见，Intersection Observer API 简单易用又富创造性。尽管可能需要 polyfill，但浏览器支持也在持续改善。该 API 将成为前端优化的利器。
--End--
搜索 fewelife 关注公众号
转载请注明出处
