javascript - 在每个鼠标事件性能上运行代码

Question

在我的应用程序中，我设置了每次鼠标移动时发生的鼠标事件。记录它看起来像这样:

每次鼠标移动时，都会创建这些实例，因此当用户使用该组件时，可能会发生数千甚至数万个此类实例。

然后我必须在每个事件上运行一些代码才能获得我想要的功能:

  let paths = e.path.map(x => {
    return x.className;
  })

  console.log(paths);

  if (paths.includes('gantt_grid')) {
    // console.log('includes');
  }

得到以下结果:

我的功能可以正常工作，但我的问题是，这将如何提高性能？它似乎并没有减慢速度，但我确信这是不好的做法。绘制成千上万次 map 对我来说似乎并不好。浏览器能够处理这个问题吗？

如果这很糟糕，是否有其他方法可以在 JS 或 Angular 中做到这一点？

Answer 1

它现在可能不会减慢速度，具体取决于您的事件处理程序以及您正在计算的内容。但是，如果您执行一些繁重的工作(例如 DOM 操作)，它确实会减慢您的应用程序，因为它会填满主线程。

使用像 lodash throttle 这样的东西或debounce 。很多时候您不需要触发如此多的事件。

一个小例子:

const g = (id) => document.getElementById(id);
const handler = (e) => e.target.innerText = JSON.stringify({
  x: e.clientX,
  y: e.clientY
})

g('regular').addEventListener('mousemove', handler);
g('throttle').addEventListener('mousemove', _.throttle(handler, 1000));
g('debounce').addEventListener('mousemove', _.debounce(handler, 1000));

main div {
  width: 150px;
  height: 50px;
  margin: 10px;
  background: lightblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

<main>
  <div id="regular"></div>
  <div id="throttle"></div>
  <div id="debounce"></div>
</main>

您可以传递更多选项，以便您可以确保在事件开始和结束时调用您的事件处理程序。通过debounce，您甚至可以模拟throttle本身。