时间戳

首页 > 解决方案 > 为什么当开发人员控制台打开时鼠标事件的采样率更高？作为开发人员我可以/应该做什么？

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

问题描述

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。

标签： javascriptgoogle-chromemouseeventopera

解决方案

推荐阅读