javascript - How does HotJar generate their recordings? - Stack Overflow

admin管理员组

文章数量:1287920

Tracking mouse movement/scroll/click events is easy but how do they save the screen and keep it in sync so well?

The pages are rendered very quite well (at least for static HTML pages, haven't tested on Angular or any SPA), the sync is almost perfect.

To generate and upload a 23fps recording of my screen (1920x1080) it would take about 2Mbps of bandwidth. Maybe when recording only when there are some mouse events it would still take some 300-500Kbps on average? That seems way too much...

Tracking mouse movement/scroll/click events is easy but how do they save the screen and keep it in sync so well?

The pages are rendered very quite well (at least for static HTML pages, haven't tested on Angular or any SPA), the sync is almost perfect.

To generate and upload a 23fps recording of my screen (1920x1080) it would take about 2Mbps of bandwidth. Maybe when recording only when there are some mouse events it would still take some 300-500Kbps on average? That seems way too much...

• javascript
• hotjar

Share Improve this question Follow edited Mar 20, 2018 at 13:34 Victor Leontyev 8,73622 gold badges1919 silver badges3737 bronze badges asked Oct 28, 2016 at 13:02 Nick MNick M 2,52255 gold badges3535 silver badges5959 bronze badges 2

• 11 i believe this is actually a very good question. If you google around people will tell you "it's impossible to record snapshots of web pages using JS". In my opnion, this question is just a specific case of the more general "how to record web pages using JS?" – Lucas Pottersky Commented Nov 7, 2017 at 17:58
• 2 From my understanding, they store HTML + CSS and mouse events. That is, they do not record a video but rather re-render and replay events. How that is all accomplished in the quality that HotJar shows .. I have no idea. They touch upon their way of communicating events without degrading performance here: docs.hotjar.com/docs/will-hotjar-slow-down-my-site – cYrixmorten Commented Nov 30, 2017 at 13:38

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 26

HTML content and DOM changes get pumped through a websocket and stored by Hotjar (minus sensitive information such as form inputs from the user, unless you've whitelisted them), the CSS isn't stored (it gets loaded by you when you watch the recording).

Because they're only recording user activity and DOM changes, there's a lot less data to record than if they were capturing a full video. The downside is that some Javascript driven widgets won't function correctly in the replay.

Relevant information from Hotjar docs:

• When it comes to recordings, changes to the page are captured using the MutationObserver API which is built-in into every modern browser. This makes it efficient since the change itself is already happening on the page and the browser MutationObserver API allows us to record this change which we then parse and also send through the websocket.
• At regular short intervals, every 100ms or 10 times per second, the cursor position and scroll position are recorded. Clicks are recorded when they happen, capturing the position of the cursor relative to the element being clicked. These are functions which in no way hinder a user's experience as they only capture the location of the pointer when a click happens or every 100ms. The events are sent to the Hotjar servers through frames within the websocket, which is more efficient than sending XHR requests at regular intervals.

Source: https://help.hotjar.com/hc/en-us/articles/115009335727-Will-Hotjar-Slow-Down-My-Site-

本文标签： javascriptHow does HotJar generate their recordingsStack Overflow