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

Kayce Basques
Kayce Basques

被动事件监听器是 Chrome 51 中新增的一项 Web 标准,具有极大潜力大幅提升滚动性能,尤其是在移动设备上。请观看以下视频,并对比演示改进效果:

运作方式

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

了解详情

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

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

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

被动事件监听器说明