摘要

  • W3C 2017 年 9 月 14 日的首份公开工作草案定义：目标元素相对容器或可见视口跨过设定交叉阈值时，浏览器异步送达通知。
  • 长网页可据此延后图片和其他内容的工作，少做滚动时的重复布局查询；收到通知后做什么，仍由应用决定。

服务员第十二次跑到厨房门口，汤还没好。厨师说：好了我摇铃。这个建议不改煮汤速度，却能救服务员的鞋底。长网页曾有相似的忙乱：它想知道下方某张图片、某个商品卡片是否快进入屏幕，于是滚动时反复问浏览器元素在哪里。照片没动到眼前，问一次和问十二次，答案常常一样。

W3C 2017 年 9 月 14 日的首份公开工作草案开篇就讲了这笔成本。显式查询元素位置可能触发样式重算和布局；持续轮询、滚动事件处理则可能让滚动掉帧。草案列出延迟加载内容、只渲染大型滚动列表的一部分、判断元素与可见区域相交等场景。它提出的不是“所有页面从此快多少”的神奇数字，而是换一种提问方式：先留下委托，状态变了再通知。

委托书上的名词很少。目标是被观察的元素；根是参照区域，可以是指定容器，也可以是在没有显式根时使用的顶层视口。IntersectionObserver 接收回调和选项。网页用 observe(target) 开始观察，用 unobserve(target) 停止追踪其中一个目标，用 disconnect() 停止全部观察。几何关系跨过预设阈值时，回调收到一组记录。服务员终于不用每隔十秒向厨房探头。

铃挂在哪里，网页自己选。rootMargin 会放大或缩小用于计算的根矩形。若希望图片真正进入视野前先开始下载，可以把触发线设在视口外面。threshold 指定交叉比例达到哪些点时送信。记录里有目标、时间、边界矩形、交叉矩形以及 intersectionRatio。图库想提前预热下一张照片，列表想等到更近才补节点，两者可以用同一套测量器，不必采用同一套编辑节奏。

通知也不是下载命令。回调可以取图片、显示卡片、生成更多列表项，也可以只记下状态。草案特别指出 unobserve() 与延迟加载相配：目标第一次进入范围、工作完成后，就不用继续追踪它。已经端上桌的汤，不需要每次客人挪椅子都再摇一遍铃。这项 API 提供的是信号，不替页面做菜单决定。

异步并非设计上的拖沓。2017 年草案认为这些用途没有硬性的即时延迟要求。晚一点获知元素跨线，通常比每次滚动都同步读取布局划算。草案还把“精确知道滤镜与合成之后到底哪些像素呈现在人眼前”列为非目标。Intersection Observer 按规则报告矩形的关系。它看不到读者是否停下、是否读懂图注，更不知道读者是不是只想快点找到页尾。

W3C 当前发布的工作草案保留了中心机制：目标相对根的交叉状态、阈值以及异步送达的记录。官方发布年表从 2017 年 9 月的首份公开草案列到 2023 年 10 月的后续草案。这里记录的是规范文件，不是浏览器装机量。2023 年那份文件在年表中仍是 Working Draft，没必要给它戴一顶“最终标准”的帽子来证明铃有用。

这个接口在内容很多的页面尤其像一位可靠的传令员。商品目录可以用一个观察器照看许多卡片，先准备即将靠近的几张。图片故事可以在下一幅还差一屏时启动加载。列表可以在一次性任务结束后停止观察相关项。过去每个团队都要写自己的滚动轮询、位置读取和触发时间表；如今共同接口承担报信，应用保留该花多少流量、何时渲染的选择。

有人想把“跨过阈值”直接卖成“得到注意力”。这两件事的计量对象不同。intersectionRatio 是规范算法算出的矩形交叉比例；一个人可能看图，也可能一扫而过，甚至在屏幕前走开。铃声说明菜到了窗口，不负责证明客人喜欢味道。界限说得越清楚，信号反而越可信。

Intersection Observer 在互联网史上是一件小器具，却改了长网页安排工作的习惯。页面不再为一张遥远的照片不停敲门；它告诉浏览器什么时候值得叫自己。照片靠近时，铃响。服务员终于有空去服务眼前这一桌。