Холст не работает должным образом, если консоль разработчика активна
Несколько дней назад мне было интересно, почему мой холст не работает должным образом. Я использую библиотеку szimek для создания подписей, и иногда эти штрихи пера выглядели немного безумно. Я также тестировал на Edge (который закончился тем же результатом, что и Chrome) и TOR (сработало как надо).
Вчера я нашел решение, почему это происходит случайным образом. Мои штрихи выглядят сумасшедшими во время использования консоли разработчика браузера, когда она открыта. Если он закрыт, они выглядят нормально (при повторном рисовании).
Кто-нибудь знает, почему это произошло, или это вызвано его основными двигателями? Вот пример того, что я имею в виду:
Спасибо.
@Teemu Это произошло только месяц назад или что-то в этом роде.
была бы удобна рабочий пример, которая повторяет проблему, кажется прекрасной в онлайн-приложении на холсте, которое я только что открыл, так что это либо ваш код, либо библиотека, как кажется (есть ли в библиотеке демо, вы могли бы дать ссылку на это).
Пожалуйста, не могли бы вы включить минимальный воспроизводимый пример кода, который вы используете?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Это происходит потому, что в Chromium (и в Gecko), согласно рекомендациям спецификаций, события пользовательского интерфейса, такие как mousemove или pointermove, регулируются до частоты обновления кадров монитора.
Однако только в Chromium и по какой-то причине, когда инструменты разработчика открыты, они генерируют необработанные события...
Таким образом, когда инструменты разработки закрыты, несмотря на то, что аппаратный указатель (например, мышь) генерирует больше событий, они объединяются в одно событие pointermove, которое может рисовать линии более плавно для глаз, поскольку каждая точка усредняется, но вы на самом деле получили меньше данных.
Вы можете получить список необработанных событий из getCoallescedEvents события pointermove, как указано в этом другом моем ответе , и из них вы также можете самостоятельно создать логику объединения, если это необходимо (используя requestAnimationFrame() как дроссель, это именно то, что делает Chromium).
Что касается того, почему Chromium отключает объединение, когда инструменты разработки открыты... для меня это все еще загадка, но у меня никогда не было достаточного стимула, чтобы искать это.
Если вы записываете что-то в консоль в функции обработчика событий mouse/touchmove, это может существенно повлиять на производительность.