25

跟踪鼠标移动/滚动/单击事件很容易，但是它们如何保存屏幕并使其保持同步呢？

页面渲染得非常好（至少对于静态 HTML 页面，尚未在 Angular 或任何 SPA 上测试过），同步几乎完美。

要生成和上传我的屏幕 (1920x1080) 的 23fps 记录，大约需要 2Mbps 的带宽。也许仅在有一些鼠标事件时录制时，平均仍需要大约 300-500Kbps？这似乎太过分了……

4

1 回答 1

23

HTML 内容和 DOM 更改通过 websocket 传输并由 Hotjar 存储（减去来自用户的表单输入等敏感信息，除非您已将它们列入白名单），不存储 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-

于 2018-03-22T20:21:26.627 回答