Как HotJar генерирует свои записи?

Question

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

Страницы отображаются очень хорошо (по крайней мере для статических HTML-страниц, не тестировались на Angular или любом SPA), синхронизация почти идеальная.

Чтобы сгенерировать и загрузить запись моего экрана со скоростью 23 кадра в секунду (1920x1080), потребуется около 2 Мбит / с полосы пропускания. Может быть, при записи только при наличии каких-либо событий с мышью это по-прежнему занимает в среднем около 300-500 Кбит / с? Это кажется слишком много...

Answer 1

Изменения содержимого HTML и DOM прокачиваются через веб-сокет и сохраняются Hotjar (за исключением конфиденциальной информации, такой как ввод данных от пользователя, если вы не занесены в белый список), CSS не сохраняется (он загружается вами, когда вы смотрите запись).

Поскольку они записывают только пользовательскую активность и изменения DOM, данных для записи гораздо меньше, чем при записи всего видео. Недостатком является то, что некоторые управляемые Javascript виджеты не будут работать правильно при воспроизведении.

Соответствующая информация из документации Hotjar:

• Когда дело доходит до записей, изменения на странице фиксируются с помощью API MutationObserver, который встроен в каждый современный браузер. Это делает его эффективным, так как само изменение уже происходит на странице, а API браузера MutationObserver позволяет нам записывать это изменение, которое мы затем анализируем, а также отправляем через веб-сокет.
• Через регулярные короткие интервалы каждые 100 мс или 10 раз в секунду записываются положение курсора и положение прокрутки. Клики записываются, когда они происходят, фиксируя положение курсора относительно элемента, по которому щелкают. Это функции, которые никоим образом не мешают работе пользователя, поскольку они фиксируют местоположение указателя только при щелчке или каждые 100 мс. События отправляются на серверы Hotjar через фреймы внутри веб-сокета, что более эффективно, чем регулярная отправка запросов XHR.

Источник: https://help.hotjar.com/hc/en-us/articles/115009335727-Will-Hotjar-Slow-Down-My-Site-