使用被动事件监听器提升滚动性能
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
被动事件监听器是 Chrome 51 的新功能,是一项新兴的 Web 标准,可大幅提升滚动性能,尤其是在移动设备上。请观看下面的视频,并排演示这些改进的实际效果:
运作方式
当您滚动页面时,如果延迟很长时间以致于页面无法固定在您的手指上,这种情况称为滚动卡顿。很多时候,当您遇到滚动卡顿时,罪魁祸首就是触摸事件监听器。触摸事件监听器通常用于跟踪用户互动和创建自定义滚动体验(例如在与嵌入式 Google 地图互动时完全取消滚动)。目前,浏览器无法知道触摸事件监听器是否会取消滚动,因此始终会等待监听器完成,然后再滚动页面。被动事件监听器使您能够在 addEventListener
的 options
参数中设置标记,指示监听器永远不会取消滚动,从而解决此问题。有了此信息,浏览器就能够立即滚动页面,而不是在监听器播放完毕后才滚动。
了解详情
有关被动事件监听器工作原理的简要概览,请参阅 Chromium 博客:
新增了 API 以帮助开发者提升滚动性能
规范的代码库,用于了解如何实现被动事件监听器:
被动事件监听器铺垫消息
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2016-06-05。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"没有我需要的信息"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"太复杂/步骤太多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"内容需要更新"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻译问题"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/代码问题"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"易于理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"解决了我的问题"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{
"last_modified": "最后更新时间 (UTC):2016-06-05。",
"state": ""
}