📌  相关文章
📜  [违规] 向滚动阻塞添加了非被动事件侦听器<some>事件.考虑将事件处理程序标记为“被动”以使页面更具响应性.看<URL>[违规] &#39;setTimeout&#39; 处理程序耗时 59 毫秒 - Javascript (1)

📅  最后修改于: 2023-12-03 15:29:14.841000             🧑  作者: Mango

违规报告:向滚动阻塞添加了非被动事件侦听器 <some> 事件

这个违规报告是指我们在向滚动元素添加事件处理器时,添加了一个非被动事件侦听器,可能会导致页面滑动卡顿,降低用户体验。

解决这个问题的方法是将我们的事件处理器标记为“被动”,这将通知浏览器该侦听器不会阻塞滚动,可以更快速地响应滚动事件。

下面是一个正确示例:

// 将事件处理程序标记为被动
element.addEventListener('scroll', handleScroll, { passive: true });
违规报告:setTimeout 处理程序耗时 59 毫秒 - Javascript

这个违规报告是指我们在使用 setTimeout 定时器时,处理程序执行的时间过长,可能会导致页面卡顿。

解决这个问题的方法是将处理程序优化为更高效的代码,以加快执行速度。

下面是一个示例,演示了如何用一个 for 循环代替 forEach 循环,以提高性能:

// 不推荐的代码,处理程序使用了 forEach 循环
setTimeout(() => {
  array.forEach(item => {
    // 处理项目
  });
}, 1000);

// 推荐的代码,处理程序使用了 for 循环
setTimeout(() => {
  for (let i = 0, len = array.length; i < len; i++) {
    const item = array[i];
    // 处理项目
  }
}, 1000);

通过这些方法,我们可以减少违规报告的数量,并提高我们的 JavaScript 代码的性能和可靠性,同时提高用户体验。