- DOM 变化： 页面结构的增删改、样式变化、动态内容加载；
- 用户交互： 点击、滚动、输入、表单操作；
- 页面状态： Focus/Blur（标签页是否在前台）、Visibility Change（页面可见性变化）；
- 路由变化： SPA 路由切换时的完整页面变化，支持 History 和 Hash 两种模式。
数据怎么传？分段上传 + 三层压缩降级
录制数据如果实时上传，会对网络和电量产生不必要的压力。RUM 采用分段上传：数据先缓存在本地的 Segment 中，每积累 200 个事件或每 5 秒（以先到者为准）进行一次 flush；当页面 hidden、frozen 或 unload 时，立即 flush 确保数据不丢失；单次会话最长录制 1 小时自动切段。
上传前的压缩过程，是工程化细节最值得说的部分。我们采用了三层降级策略，在性能、兼容性、可靠性之间取得平衡：
这套机制的精髓在于：任何一层失败，都能优雅降级到下一层——既享受了新 API 的高效，又不抛弃任何老用户。
性能影响？ 实测 Session Replay 在常规页面上的 CPU 开销 1–3%，内存增量 2–5MB（具体视页面复杂度而定）。采样率配置让你可以精确控制录制范围——生产环境建议 10–20%，测试环境可以开到 100%。
隐私保护：四级安全策略
录制用户操作必然涉及隐私。RUM SDK 提供四级隐私保护配置，从最严格到最宽松：
此外还支持通过 CSS 类名精细控制：rum-block 标记的元素被完全遮蔽（黑块），rum-ignore 标记的元素不会被录制，rum-mask 标记的文本会被遮蔽。合规与可观测性，可以兼得。
什么场景最有用？
场景一：Bug 复现。 用户报了一个偶现的 UI 异常，以前你需要让用户“再试一次并录屏发给我”，现在直接在后台找到对应的 Session 回放，快进到他操作的那一刻——DOM 结构、样式变化、交互时序一目了然。
场景二：转化漏斗分析。 电商结账流程有 5 步，在第 3 步流失了 40% 的用户。通过回放这些流失用户的 Session，你发现第 3 步的地址表单有一个必填字段在小屏设备上被键盘遮挡了——这个洞察靠日志和指标是得不到的。
场景三：客服支持。 用户打电话说“我填了半天表单提交不了”，客服通过 Session ID 找到回放，发现用户在日期选择器上反复点击无效——原来是日期格式提示不够明显。30 秒定位问题，不用来回沟通。
热力图：让群体行为“浮出水面”
Session Replay 帮你看到“一个人的故事”，热力图则帮你看到“一群人的模式”。当成百上千的用户在同一个页面上留下了行为痕迹，热力图将这些数据聚合叠加，以颜色深浅直观呈现用户关注的焦点和行为的分布。
RUM 提供点击热力图、区域热力图、滚动热力图三种维度，从不同切面回答：“用户在点哪里？关注哪里？看到多少？”
2.1 点击热力图（Click Heatmap）：用户的“鼠标指纹”
最经典也最直观的热力图类型。SDK 在捕获阶段（capture phase）监听页面的 click 事件，采集每次点击的文档坐标 (x, y)、元素内相对坐标 (ex, ey)、selector 路径以及 viewport 尺寸。数据上报后，后端将所有点击坐标叠加到页面快照上，用颜色深浅表示点击密度——红色区域是用户最爱点的地方，蓝色区域则是无人问津的“冷区”。
真实电商首页的点击热力图：右上角“交互统计”显示总点击次数 1817、页面访问量 987——平均每位访客点击近 2 次；左侧“元素点击次数”自动归类——input 244 次（13.43%）、img 156 次（8.59%）、button 144 次（7.93%），告诉你用户最常触碰哪类元素；中央页面上的蓝→红色块和数字序号，则把每个点击区域的热度按排名清晰标出。
RUM 的点击采集，不止于“记下坐标”，还做了两件别人很少做的事：
- 判断元素是否可交互（
target.reaction）：button、a、input、select、option、textarea、details、summary、audio、video 等标签，或具有onclick/role=button/tabindex/cursor:pointer属性的元素被标记为“可交互”。如果一个不可交互的元素上有大量点击，说明用户以为它应该可以点击——这就是一个 UI 设计问题。 - 判断点击是否可信（
target.trust）：综合事件来源（isTrusted）、元素尺寸（小于 20px 视为不可信）、可见性（display:none/visibility:hidden/opacity:0）多维判定。过滤掉自动化脚本和误触噪音，热力图才能真实反映用户行为。
无效点击分析——一个被低估的能力当 reaction=0（不可交互元素）上出现大量点击时，意味着用户在不该点的地方点了——这通常暴露了 UI 设计的问题：看起来像按钮但其实不是、图片看起来可以点击但其实不能。通过无效点击分析，产品团队可以精准发现并修复这些“交互错觉”，直接提升用户体验。
2.2 区域热力图（Area Heatmap）：用户的“注意力地图”
如果说点击热力图回答的是“用户点了哪里”，区域热力图回答的是“用户在关注哪里”。它在点击数据的基础上，结合元素的尺寸和位置，将用户的注意力映射到页面的各个业务区域。
区域热力图的精髓在于业务可读性：一个个蓝色虚线框框出商品卡片、导航菜单、活动入口等关键业务模块，每个区域旁附带点击次数、占比、业务用户数。运营团队不再需要数像素，而是直接看到“哪个 Banner 拉来了 30% 点击”、“哪张商品卡几乎无人问津”——决策依据从“感觉”变成“数字”。
对于大尺寸的 Banner、图片墙或内容列表，区域热力图能告诉你哪个区域“吸引眼球”，哪个区域“形同虚设”，是 A/B 改版前后对比、首页坑位价值评估的“标尺”。
2.3 滚动热力图（Scroll Heatmap）：用户究竟看到了多少？
滚动热力图回答一个看似简单但极其关键的问题：你的页面，到底有多少内容真正被用户看到了？
滚动深度分布一目了然：100% 用户看到首屏（31 人），到 54.8% 处仍有 17 人在看——意味着接近一半的访客根本没有滚动到页面下半部分。右侧从红（高到达率）到绿（低到达率）的色带，把每个百分位的“折返点”具象化。如果你的核心 CTA 不幸落在绿色区域，那它对一半用户而言形同隐藏。
RUM SDK 滚动追踪没有把滚动作为离散的 Action 事件来处理（那会产生大量事件），而是在每个 View 的生命周期内持续追踪滚动深度，并在 View 结束时上报最终统计摘要：
核心计算公式：scrollDepth = (scrollTop + clientHeight) / scrollHeight。
为了避免高频滚动事件带来的性能问题，SDK 通过 throttle（leading + trailing 模式） 节流，每 100ms 最多采样一次；同时使用 ResizeObserver 监听 document.body 高度变化，覆盖懒加载图片、无限列表预取、折叠面板展开等动态场景，避免 max_scroll_height 被低估；View 结束时主动 cancel 尾调用，杜绝跨 View 串数据。
对于内容运营团队来说，这张图就是一张“内容可见性地图”——如果你把最重要的 CTA 放在了红色区域之外，那几乎等于把它藏了起来。
与友商的差异化对比
Session Replay 和热力图并非新概念，Datadog、Sentry 等厂商均有涉足。但各家的侧重点和成熟度差异显著。下表聚焦两大核心能力进行对比：
我们的差异化优势
第一，三种热力图全覆盖。 同时具备点击 / 区域 / 滚动三种页面级热力图的厂商屈指可数。RUM 的三件套，能够从“点击位置”、“关注区域”和“浏览深度”三个维度全方位刻画用户行为。
第二，精细化的点击质量分析。 通过 reaction（可交互性）和 trust（可信度）两个维度的交叉分析，RUM 不仅告诉你“用户点了哪里”，还能告诉你“这些点击是否有效”和“是否来自真实用户”。
第三，四级隐私保护配置。 从默认 mask 到精细 allowlisted，再到完全开放 allow，覆盖从最严格合规要求到最宽松调试场景的完整光谱。
第四，三层压缩降级 = 兼容性 + 性能 + 可靠性。 原生 CompressionStream 优先 → WebWorker pako 兜底 → 原始数据保底，这种工程上的细致考量，在大规模生产部署中体现出明显优势——新浏览器跑得快，老浏览器跑得通，极端情况不丢数据。
五分钟上手
接入复杂吗？不复杂。如果你已经在使用云监控 Browser SDK，只需要在初始化配置中增加几行：
同时启用 Session Replay + 热力图
import armsRum from '@arms/rum-browser';
armsRum.init({
endpoint: 'https://your-endpoint.com/rum/web/v2',
// Session Replay 配置
replay: {
enable: true,
sampling: 20, // 20% 的会话会被录制
privacy: {
level: 'user-input', // 仅遮蔽用户输入
},
},
// 热力图配置
collectors: {
click: {
enable: true,
trackUserInteractions: true, // 启用热力图数据采集
},
},
});这套组合拳覆盖了从个案诊断到群体洞察的完整链路——不再需要让用户“再试一次并截图给我”，不再需要在会议上为“用户到底喜不喜欢这个改版”而争论不休。
当你的可观测体系覆盖了从后端到前端、从指标到行为的完整链路，那些曾经隐藏在用户浏览器里的体验问题，终将无处遁形。
- 立即体验： 前往云监控 [ 1] 创建用户体验监控应用，获取 endpoint 后即可开始接入。访问演示 DEMO [ 2] 立即体验。
- 技术文档： 完整的配置参考 [ 3] 文档。
- 社区交流： 加入钉钉群 [ 4] ，与阿里云可观测团队交流。r
-
随着前端体验优化需求的精细化，开发者面临的挑战已从“发现报错”转向“理解用户行为”。面对页面卡顿却无日志、转化率下降不知原因等“黑盒”难题，传统的指标监控往往显得力不从心。
阿里云云监控 CMS（CloudMonitor Service）2.0 作为统一的可观测管理平台，在前端监控（RUM）领域持续深耕。为了帮助开发者穿透浏览器端的迷雾，CMS 团队推出了 Session Replay 与三维热力图能力。通过 DOM 增量追踪技术与多维行为分析，我们将用户操作现场完整带回，并结合四级隐私保护机制，让开发者在合规的前提下，实现从个案精准复现到群体行为洞察的跨越，真正达成“看见用户每一步”的体验优化闭环。
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .