HotJar如何生成他们的录音？

Question

跟踪鼠标移动/滚动/点击事件很容易,但他们如何保存屏幕并使其保持同步？

页面呈现得非常好(至少对于静态HTML页面,没有在Angular或任何SPA上测试过),同步几乎是完美的.

要生成并上传23fps的屏幕录制(1920x1080),需要大约2Mbps的带宽.也许只有当有一些鼠标事件录制时,它仍然需要平均300-500Kbps？这似乎太多了......

Answer 1

HTML内容和DOM更改会通过websocket抽出并由Hotjar存储（减去敏感信息，例如来自用户的表单输入，除非您已将它们列入白名单），则不会存储CSS（观看时会加载CSS）记录）。

由于他们仅记录用户活动和DOM更改，因此与捕获完整视频相比，要记录的数据要少得多。缺点是某些Javascript驱动的小部件在重放中无法正确运行。

Hotjar文档中的相关信息：

• 在录制方面，使用每个现代浏览器都内置的MutationObserver API捕获页面更改。由于更改本身已经发生在页面上，并且浏览器MutationObserver API允许我们记录此更改，然后我们对其进行解析并通过websocket发送，因此这使效率提高。
• 每隔100毫秒或每秒10次，定期记录一次光标位置和滚动位置。点击发生时会记录下来，捕获光标相对于被点击元素的位置。这些功能绝不会妨碍用户的体验，因为它们仅在单击发生时或每100毫秒捕获一次指针的位置。事件通过WebSocket内的帧发送到Hotjar服务器，这比定期发送XHR请求效率更高。

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