MousePlayer 如何工作

简明介绍跟踪架构、跨设备屏幕分辨率处理方式与系统边界。

1. 为什么不使用视频录制

常见误解是可视化分析工具会将访客屏幕录制为标准视频文件（如 MP4 或 WebM）。这样会消耗大量带宽、显著拖慢网站，并使文字模糊难辨。

MousePlayer 改用一种轻量技术，称为 DOM 快照遥测。基本工作方式如下：

蓝图快照

访客打开页面时，脚本会为 HTML 与样式结构生成基于文本的“蓝图”。它记录元素位置，不复制页面的图像或视频文件；回放时，播放器从原始地址加载图像。例外是 canvas 元素，其内容作为图像传输（见下文）。

坐标遥测

用户交互时，我们记录一系列事件：鼠标位置、滚动深度、点击目标和浏览器尺寸变化，以及页面本身的变化；根据设置，还可能记录控制台消息、失败或缓慢的请求以及加载时间测量值（Web Vitals）。移动和点击的数据量很小；页面快照和页面变化的数据量则可能随页面而显著增大，并以压缩形式传输。

剧场回放

在仪表板观看会话时，播放器利用记录的蓝图重建页面，并实时移动虚拟指针，文字始终清晰锐利。

专为轻量运行而设计： 脚本异步加载，传输小型数值数据点而非视频，因此自身开销较小。它对 Core Web Vitals 的实际影响取决于页面、托管环境和访客网络，请在自己的网站上测量，不要直接采用我们给出的数值。不保证任何特定加载速度 – 参见以下文件第 20 条： 服务条款。

2. 适配屏幕分辨率 & 移动设备

如今用户从小巧的智能手机到超宽 4K 桌面显示器都会使用。网站会自动调整、折叠和重排布局，以适应不同屏幕宽度，这一概念称为响应式 Web 设计。

如何匹配访客的准确视口

为确保回放画面不失真，MousePlayer 会记录访客准确的视口尺寸，例如智能手机的 390x844 或桌面显示器的 1920x1080 。打开剧场播放器时，引擎会创建按比例缩放的沙盒，精确还原访客的原始屏幕比例。

桌面电脑 & 笔记本电脑屏幕

在标准电脑上，我们采集同一浏览器会话内连续的鼠标移动和跨标签页导航。若悬停打开菜单时页面文档发生变化，菜单就会出现在回放中；纯 CSS 悬停效果在文档中不可见，因此不会在回放中重现。

智能手机 & 平板电脑

触摸屏没有悬停鼠标指针。MousePlayer 会自动适配，记录触摸手势、滑动滚动和方向变化（竖屏与横屏）。

会话中途调整尺寸的挑战

访客在会话中途旋转平板电脑或调整桌面浏览器窗口尺寸时，网站布局会动态变化。MousePlayer 会采集这些窗口尺寸调整事件，并即时无缝调整回放画布，保留交互上下文。

3. 系统限制 & 技术边界

为尊重用户隐私、维持浏览器安全并保持数据处理迅速，MousePlayer 在明确的技术边界内运行：

系统边界 MousePlayer 如何处理
iFrame 与页面同源的 iframe 会连同内容及内部交互一起录制。其他源的嵌入内容（如 YouTube 播放器、Stripe 付款表单）因浏览器安全策略（同源策略）而无法录制其内部；它们在回放中显示为占位符，且不会在那里加载。
敏感输入字段（PII） 在每个遮蔽级别，密码与付款字段都会在访客设备上被遮蔽；每个媒体资源默认全面遮蔽所有表单输入。可以看到输入行为，但看不到输入内容。存在两个限制：仅在我们书面批准后，才能启用较弱的两个遮蔽级别；遮蔽始终无法覆盖您自己的页面输出到文档中的内容 – 显示地址的确认页面属于快照的一部分。两者均在以下文件中说明： 数据处理协议。
Canvas & WebGL 元素 canvas 内容以图像形式录制：随页面快照录制一次，此后每次变化时再录制，最多约每秒一次，并设有大小限制。因此，流畅动画会显示为一系列帧。遮蔽区域或包含其他源图像的 canvas 元素不传输图像；WebGL 内容可能保持空白。
Web 组件（Shadow DOM） 开放的影子根会连同内容一起录制。脚本无法访问封闭的影子根，其内容会在回放中缺失。
传输 & 浏览器存储 数据通过加密 WebSocket 连接（HTTPS/WSS）发送。若无法建立连接，例如受代理影响，脚本会回退至加密 HTTP 路径；超大页面快照会通过 HTTPS 单独上传。MousePlayer 不设置 Cookie；它使用您网站上的浏览器本地存储和会话存储。
AFK 空闲时段 如果访客保持标签页打开并离开 20 分钟，引擎会自动检测无操作状态，并在回放中压缩空闲间隔，避免浪费时间观看静止画面。