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

被动事件监听器是 Chrome 51 的新功能,是一项新兴的 Web 标准,可大幅提升滚动性能,尤其是在移动设备上。请观看下面的视频,并排演示这些改进的实际效果:

运作方式

当您滚动页面时,如果延迟很长时间以致于页面无法固定在您的手指上,这种情况称为滚动卡顿。很多时候,当您遇到滚动卡顿时,罪魁祸首就是触摸事件监听器。触摸事件监听器通常用于跟踪用户互动和创建自定义滚动体验(例如在与嵌入式 Google 地图互动时完全取消滚动)。目前,浏览器无法知道触摸事件监听器是否会取消滚动,因此始终会等待监听器完成,然后再滚动页面。被动事件监听器使您能够在 addEventListeneroptions 参数中设置标记,指示监听器永远不会取消滚动,从而解决此问题。有了此信息,浏览器就能够立即滚动页面,而不是在监听器播放完毕后才滚动。

了解详情

有关被动事件监听器工作原理的简要概览,请参阅 Chromium 博客:

新增了 API 以帮助开发者提升滚动性能

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

被动事件监听器铺垫消息