javascript - HotJar 如何生成他们的录音？

Question

跟踪鼠标移动/滚动/点击事件很容易，但它们如何保存屏幕并保持同步如此好？

页面呈现得非常好(至少对于静态 HTML 页面而言，尚未在 Angular 或任何 SPA 上测试)，同步几乎完美。

要生成并上传我的屏幕 (1920x1080) 的 23fps 记录，需要大约 2Mbps 的带宽。也许只有在有一些鼠标事件时才进行录制时，平均仍需要 300-500Kbps 的速度？这似乎太多了......

Answer 1

HTML 内容和 DOM 更改通过 websocket 传输并由 Hotjar 存储(减去敏感信息，例如来自用户的表单输入，除非您将它们列入白名单)，CSS 不存储(它由您加载你看录音)。

因为它们只记录用户事件和 DOM 更改，所以与捕获完整视频相比，要记录的数据要少得多。缺点是一些 Javascript 驱动的小部件在回放中无法正常运行。

来自Hotjar文档的相关信息:

• 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.

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