Блог

Главная - Вопросы по программированию - Почему события мыши отбираются с большей скоростью, когда открыта консоль разработчика, и что я могу / должен делать как разработчик по этому поводу?

Почему события мыши отбираются с большей скоростью, когда открыта консоль разработчика, и что я могу / должен делать как разработчик по этому поводу?

#javascript #google-chrome #mouseevent #opera

#javascript #google-chrome #mouseevent #opera

Вопрос:

Я играл с рисованием на HTML canvas с использованием mousemove событий, когда заметил, что линии, которые я рисовал, были более «пикселизированными», когда консоль разработчика была открыта. Как я и подозревал, причина в том, что при открытой консоли разработчика события мыши отбираются / запускаются с гораздо большей скоростью.

Вы можете проверить с помощью следующего фрагмента кода. На моем ноутбуке с Windows 10 с Chrome и Opera я получаю максимум около 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: Результаты могут отличаться в зависимости от браузера и версии (и, возможно, ОС или чего-то еще?). Друг получал только до 128 событий в секунду с открытой консолью разработчика в Chrome и Edge. Firefox достиг максимума в 60 с консолью разработчика или без нее.