hotjar中录屏功能是其重要的一个卖点，看着很牛X酷炫的样子，今天就简单的分析一下hotjar其实现录屏原理。
1、获取完整DOM内容
hotjar如果要实现完整的录屏功能，在客户端在没有客户允许的前提下，目前是无法做到的，所以只能考虑在服务端来实现，在服务端实现的第一步，就必然需要重现客户端的渲染结果，此时需要完整的发送客户端内容到服务端，在服务端进行完整的渲染。
2、获取鼠标移动轨迹
只是获取完整DOM内容只是第一步，在hotjar的录屏功能中，还有一个是获取鼠标运动轨迹，想要绘制运动轨迹，必然要知悉鼠标在时间轴上的位置信息，所以hotjar中，必然要采集鼠标在不同时间点的位置信息，这个可以通过其websocket 请求。
3、检测并发送DOM变化
除了鼠标运行轨迹之外，用户在页面上的所有行为都会被完整的记录下来，页面的任何变化也都被记录了下来，如果需要在服务端完整的重新演化这种变化，那么需要把完整的变化结构发送到服务器，让服务端进行变化回溯，hotjar是通过ws中发送mutation发送这种结构包的，当然要发送这种结构包，首先要先观测DOM变化，这里也有一种简单的方式(暂时不确定hotjar的实现)HTML5 DOM4级MutatioObserver方法，可以检查页面中的DOM是否发生变化，大家可以做一下简单的测试。
4、变化和轨迹回溯生成视频
最后一切数据准备完毕，hotjar需要生成视频了，生成视频当然涉及很多的计算，因为要演化和回溯用户的所有操作，我猜可能的思路是这样的：
1)在服务器启动浏览器 并 启动录屏软件(录屏软件只是猜测可能有其它多种方式)。
2)根据页面发送的完整DOM进行初始化内容展示。
3)按照时序合并鼠标轨迹和mutation包数据。
4)根据时间轴自动操作改变DOM。
5)访次结束完成录制。
以上就是本期关于hotjar的相关资讯，想要获取更多关于hotjar的知识干货，请您持续关注跨境达人!
标签：
