使用被动事件监听器提升滚动性能

Kayce Basques

在 Chrome 51 中，新增了一种新兴的 Web 标准：被动事件监听器。这种监听器有望显著提升滚动性能，尤其是在移动设备上。请观看以下视频，并对比演示改进效果：

注意：基本 scroll 事件无法取消，因此无需将其设为无效。不过，您仍应阻止在处理程序中完成耗时的工作。

运作方式

如果您滚动网页时出现延迟，导致网页感觉没有固定在您的手指上，这种情况称为滚动卡顿。很多时候，滚动卡顿的罪魁祸首是触摸事件监听器。触摸事件监听器通常非常有用，可用于跟踪用户互动和创建自定义滚动体验，例如在与嵌入的 Google 地图互动时完全取消滚动。目前，浏览器无法知道触摸事件监听器是否会取消滚动，因此它们总是等待监听器完成后再滚动页面。借助被动事件监听器，您可以在 addEventListener 的 options 参数中设置一个标志，指明监听器绝不会取消滚动，从而解决此问题。借助这些信息，浏览器可以立即滚动网页，而不是在监听器完成后滚动。

了解详情

如需简要了解被动事件监听器的运作方式，请参阅 Chromium 博客：

新增了一些 API，可帮助开发者提升滚动性能

以及规范的代码库，了解如何实现被动事件监听器：

被动事件监听器说明