如此解决-Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.

在Quasar项目中，通过default-passive-events库解决非被动事件监听器导致的滚动性能问题，是一种高效且通用的解决方案。以下是对该方案的核心要点总结与实践指导：

1．一、方案核心目标

解决因touchstart、touchmove、wheel等滚动相关事件监听器未声明passive: true而导致的滚动卡顿和控制台警告问题，提升页面滚动流畅度（尤其在移动设备上）。

2．二、关键实施步骤

（1）1. 依赖安装

通过包管理器安装default-passive-events库：

npm install default-passive-events  # npm
yarn add default-passive-events     # Yarn

（2）2. Boot文件配置

在src/boot目录下创建passive-events.js，并注册为Quasar的启动脚本：

// src/boot/passive-events.js
export default ({ ssrContext }) => {
  // 仅在客户端环境加载（避免SSR冲突）
  if (process.env.CLIENT) {
    import('default-passive-events')
      .then(() => console.log('[Passive Events] 被动事件监听器已启用'))
      .catch(err => console.error('加载被动事件库失败:', err));
  }
};

（3）3. 注册启动脚本

在quasar.config.js中注册该Boot文件，确保项目启动时加载：

// quasar.config.js
module.exports = configure((ctx) => ({
  boot: [
    'passive-events',  // 添加此处
    // ...其他boot文件
  ],
  // 其他配置...
}));

3．三、原理与效果

（1）原理说明

default-passive-events库通过重写addEventListener方法，自动为以下事件添加passive: true选项：

• 滚动相关事件：touchstart、touchmove、touchend、wheel、mousewheel
这使得浏览器无需等待事件处理完成即可开始滚动，避免阻塞主线程。

（2）验证效果

• 控制台警告消失：原有的“非被动事件监听器”警告不再出现。

• 滚动流畅度提升：通过Lighthouse测试，“Passive event listeners”指标得分为1（满分），滚动帧率接近60fps。

• 性能报告验证：运行Lighthouse测试，检查uses-passive-event-listeners项显示通过。

4．四、注意事项

（1）1. 兼容性

• 支持现代浏览器（Chrome 51+、Firefox 49+、Edge 79+），旧浏览器自动回退为非被动模式（无功能影响）。

• SSR项目需通过process.env.CLIENT限制仅客户端加载，避免服务端渲染错误。

（2）2. 特殊场景处理

若需要在事件中调用event.preventDefault()（如禁止滚动），需显式设置passive: false：

// 原生JS
element.addEventListener('touchstart', handler, { passive: false });

// Vue/Quasar模板
<div @touchmove.passive="handleTouchMove">  <!-- 默认被动 -->
<div @touchmove="handlePreventScroll" { passive: false }>  <!-- 显式禁用被动 -->

（3）3. 框架组件优化

Quasar内置组件（如QScrollArea）已优化滚动性能，无需额外处理；自定义组件建议通过.passive修饰符声明被动模式。

5．五、总结

通过default-passive-events库，Quasar项目可快速解决滚动性能问题，消除控制台警告，提升用户体验。核心优势在于零代码侵入（仅需引入库和配置Boot文件），同时支持灵活扩展（如自定义事件类型）。建议在所有涉及滚动交互的项目中集成此方案，尤其注重移动端体验的应用。

 

参考网址：https://juejin.cn/post/7497992230268911631