我在使用mousemove事件在HTML画布上进行绘制时，注意到当开发人员控制台打开时，我绘制的线条更加“像素化”。正如我所怀疑的，原因是当开发人员控制台打开时，鼠标事件的采样/触发率要高得多。
您可以使用以下代码段进行验证。在装有Chrome和Opera的Windows 10笔记本电脑上，我每秒最多得到大约60个事件，除非我打开开发人员控制台（使用Ctrl + Shift + J），此时我每秒最多得到1000个事件。
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>所以我的问题是双重的：
1.为什么Chrome和Opera会这样做？我认为让一个系统在调试/开发模式下的行为与生产模式不同通常是一个坏主意。
1.作为一个开发人员，我能或者应该以某种方式弥补这些差异吗？对于绘图应用程序，差异是明显的，但很小，所以我可以忽略它们，但我可以想象，有些情况下的影响更大。
PS：结果可能会因浏览器和版本而异（可能还有操作系统之类的？）。一个朋友在Chrome和Edge中打开开发控制台时，每秒只能获得128个事件。Firefox在有或没有开发控制台的情况下最高达到60。
1条答案
按热度按时间yzuktlbb1#
我也面临着同样的问题，这真的让我很恼火。
我通过在指针移动处理函数的最开始添加这些行来解决它，以过滤高速率事件（当使用devtools时）并保持一致的体验（60fps）。
在我的示例中，* this.pointerTimestamp * 是监听事件的类的成员。