当开发者控制台打开时，为什么鼠标事件的采样率更高？作为开发者，我可以/应该做些什么？

问题描述

当我发现开发人员控制台打开时，我正在绘制的线条更加“像素化”时，我正在使用mousemove事件在HTML画布上绘画。我怀疑原因是在开发人员控制台打开时，鼠标事件的采样/触发速率要高得多。

您可以使用以下代码段进行验证。在装有Chrome和Opera的Windows 10笔记本电脑上，除非我打开开发者控制台（使用Ctrl + Shift + J），否则每秒最多最多可以看到60个事件。

const header = document.querySelector('h3');
let eventsPerSec = 0;

function decreaseCounter() {
  eventsPerSec--;
  renderText();
}

function renderText() {
  header.innerHTML = `Mouse move events in the last second: ${eventsPerSec}`
}

document.addEventListener('mousemove',event => {
  eventsPerSec++;
  setTimeout(decreaseCounter,1000);
  renderText();
})

renderText();

<!DOCTYPE HTML>
<html>

<head>
  <Meta charset="UTF-8">
  <title>Count Events</title>
  <h3>
  </h3>
</head>

所以我的问题有两个：

为什么Chrome和Opera会以这种方式运行？我认为让系统处于调试/开发人员模式与生产环境的行为通常是一个坏主意。
作为开发人员，我可以还是应该以某种方式弥补这些差异？对于绘图应用程序，差异是显而易见的，但差异很小，因此我可以忽略它们，但是我可以想象在某些情况下影响更大。

PS：结果可能会因浏览器和版本（可能是操作系统或其他原因）而异。在Chrome和Edge中打开开发者控制台时，一个朋友每秒最多只能接收128个事件。不论有无开发控制台，Firefox的最高支持为60。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

google-chrome javascript mouseevent