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

问题描述 投票：0回答：1

我正在尝试使用 

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 会这样？我认为让系统处于调试/开发人员模式的行为与生产模式不同通常是个坏主意。
  2. 作为开发人员，我可以或应该以某种方式弥补这些差异吗？对于绘图应用程序，差异很明显但很小，所以我可以忽略它们，但我可以想象在某些情况下影响更大。

PS：结果可能因浏览器和版本（可能还有操作系统之类的？）而异。在 Chrome 和 Edge 中打开开发控制台时，一位朋友每秒最多只能收到 128 个事件。 Firefox 在有或没有开发控制台的情况下都达到了 60。

javascript google-chrome mouseevent opera
1个回答
0
投票

刚遇到完全相同的问题，这让我很烦。

我通过在我的指针移动处理函数的最开始添加这些行来过滤高速率事件（使用 devtools 时）并保持一致的体验（60fps）来解决它。

在我的例子中，this.pointerTimestamp是监听事件的类的成员。

    if (event.timeStamp - this.pointerTimestamp < 1000/60) {
        return
    }
    this.pointerTimestamp = event.timeStamp
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.