如何利用 Passive Event Listeners 提升页面的滚动性能？

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何利用 Passive Event Listeners 提升页面的滚动性能？

2025-10-20

浏览次数：次

返回列表

Passive Event Listeners通过告知浏览器事件不会调用preventDefault()来提升滚动性能，使浏览器无需等待J*aScript执行即可流畅滚动。使用时在addEventListener的第三个参数中设置passive: true，尤其适用于touchstart、touchmove等事件。现代浏览器已默认对部分事件启用该特性，但仍建议手动指定以确保兼容性。可通过特性检测判断支持情况并动态添加。启用后可减少主线程阻塞、降低掉帧风险，配合requestAnimationFrame进一步优化体验。若需调用preventDefault()则不应设为passive，否则将失效并可能报错。合理使用Passive Event Listeners是提升滚动流畅度最简单有效的手段之一。

如何利用 passive event listeners 提升页面的滚动性能？

在现代网页开发中，滚动性能直接影响用户体验。Passive Event Listeners 是一项简单却高效的优化手段，能显著减少页面滚动时的卡顿。

什么是 Passive Event Listeners？

Passive Event Listeners 是一种事件监听器选项，告诉浏览器该事件监听器不会调用 preventDefault()。这意味着浏览器可以立即开始处理滚动操作，而无需等待 J*aScript 执行完成。

默认情况下，浏览器为了安全会假设事件处理器可能会阻止默认行为（如滚动），因此必须等待事件处理函数执行完毕才能继续滚动。启用 passive 模式后，这个等待过程被跳过，滚动更流畅。

如何使用 Passive Event Listeners？

通过 addEventListener 的第三个参数传入选项对象，设置 passive: true 即可启用。

对 wheel、mousewheel、touchstart 和 touchmove 这类影响滚动的事件特别有效
示例代码：

element.addEventListener('touchstart', handleTouchStart, { passive: true });

如果不确定是否需要调用 preventDefault()，可以先设为 passive，在内部通过 e.defaultPrevented 判断是否已被阻止。

自动启用与浏览器支持

现代浏览器（Chrome、Firefox、Safari 等）已默认对某些事件（如 touchstart 和 touchmove）在 document 级别启用 passive 模式。但为了兼容性和明确意图，建议手动指定。

AI Surge Cloud

低代码数据分析平台，帮助企业快速交付深度数据

87 查看详情 AI Surge Cloud

可以通过特性检测判断是否支持 passive 选项，避免不兼容问题：

let supportsPassive = false;
try {
  const opts = Object.defineProperty({}, 'passive', {
    get() {
      supportsPassive = true;
    }
  });
  window.addEventListener('test', null, opts);
} catch (e) {}

之后根据 supportsPassive 的值动态添加事件监听器。