简析hotjar录屏功能实现原理
众所周知，hotjar中录屏功能是其重要的一个卖点，看着很牛X酷炫的样子，今天就简单的分析一下其可能实现（这里只根据其请求加上个人理解分析，并不代表hotjar中真实实现必然如此）的原理。
1、获取完整DOM内容
如果要实现完整的录屏功能，在客户端在没有客户允许的前提下，目前是无法做到的，所以只能考虑在服务端来实现，在服务端实现的第一步，就必然需要重现客户端的渲染结果，此时需要完整的发送客户端内容到服务端，在服务端进行完整的渲染。
从布玛的效果来看，获取DOM内容会涉及如下三个请求：
请求1 用来判断该页面内容在服务端是否存在 Request URL: https://in.hotjar.com/api/v1/sites/848493/pages/2338866123/content-id/34b2f50d09fbe08a4444e6691b1be779 Request Method: GET Status Code: 200 //响应结果 {"exists": false} 请求2 预检请求 没啥说的，应该都知道干啥的 Request URL: https://in.hotjar.com/api/v1/sites/848493/url-hash/4f9e7b2f60ba35900e873ed12b1502ec/content Request Method: OPTIONS Status Code: 200 请求3 发送完整DOM内容 Request URL: https://in.hotjar.com/api/v1/sites/848493/url-hash/4f9e7b2f60ba35900e873ed12b1502ec/content Request Method: POST Status Code: 200 Request Payload content: "{"docType":"<!DOCTYPE html>\n","rootId":1,"childre" ....... content_md5: "34b2f50d09fbe08a4444e6691b1be779" page_id: 2338866123 page_url: "xxxxxxxxx.html" //响应结果 {"page_content_id": 8784354270, "success": true} 从请求3 中可以看到，content部分其实就是对完整html的json化，这部分内容比较长，只贴出部分内容。
2、获取鼠标移动轨迹
只是获取完整DOM内容只是第一步，在hotjar的录屏功能中，还有一个是获取鼠标运动轨迹，想要绘制运动轨迹，必然要知悉鼠标在时间轴上的位置信息，所以hotjar中，必然要采集鼠标在不同时间点的位置信息，这个可以通过其websocket 请求
Request URL: wss://ws7.hotjar.com/api/v1/client/ws Request Method: GET Status Code: 101 Switching Protocols 在ws 请求过程中，会有mouse-move数据包的发送，其基本结构如下：
mouse_move: [{time: 106597, x: 215, y: 115}, {time: 106695, x: 181, y: 105}, {time: 106796, x: 134, y: 139},…] page_visit_id: 14777325238 page_visit_key: "e9fa998e-5811-4d2f-81d2-bd296c7129af"其中可以看到mouse_move 数据结构中，包含了时间轴上不断变化的坐标值（x,y）,有了基于时间轴的xy坐标，我们绘制内容就变的不那么复杂了。
3、检测并发送DOM变化
除了鼠标运行轨迹之外，用户在页面上的所有行为都会被完整的记录下来，页面的任何变化也都被记录了下来，如果需要在服务端完整的重新演化这种变化，那么需要把完整的变化结构发送到服务器，让服务端进行变化回溯，hotjar是通过ws中发送mutation发送这种结构包的，当然要发送这种结构包，首先要先观测DOM变化，这里也有一种简单的方式（暂时不确定hotjar的实现）HTML5 DOM4级MutatioObserver方法，可以检查页面中的DOM是否发生变化，大家可以做一下简单的测试：
//选择目标观测节点 let target = document.querySelector('目标节点选择器'); // 创建观察者对象 var observer = new window.MutationObserver(function(mutations) { mutations.forEach(function(mutation) { console.log(mutation); }); }); // 观测项配置: var config = { attributes: true, childList: true } // 开始观测目标节点 observer.observe(target, config);获取到变化的DOM结构（这种变化也是时序的变化，因为任何操作都可能导致变化，变化必然是有先后顺序的），然后通过ws发送到服务器，通过chrome network可以看到ws中mutation基本的包结构如下：
