导读：热力图是分析用户点击行为的利器，但前端埋点的坐标换算很多人都搞不清。我在456数据做热力图模块时踩过不少坑，今天把坐标系的逻辑讲透。
热力图到底埋的是什么？
热力图的核心就是：记录用户在页面上每一次点击的坐标位置，然后把相同位置的点击密度渲染成颜色深浅。
三个坐标系，先搞清楚
| 属性 | 参考原点 | 说明 |
|---|---|---|
clientX / clientY | 视口左上角 | 相对当前可视区域，不含滚动 |
pageX / pageY | 文档左上角 | 相对整个页面，包含滚动距离 |
screenX / screenY | 屏幕左上角 | 相对物理屏幕，一般用不上 |
根据MDN MouseEvent文档，pageY = clientY + scrollY。热力图用的是pageX/pageY。
document.addEventListener('click', function(e) { const x = e.pageX; const y = e.pageY; trackHeatmapClick({ x, y }); });我的经验：热力图埋点一定要存百分比坐标，不要存绝对像素。不然不同屏幕的热力图全错位了。
总结
热力图埋点的核心是坐标换算。总结一下三个要点：pageY = clientY + scrollY是最基本的换算关系，百分比坐标是解决多分辨率对齐的关键，设备像素比是高清屏不模糊的保证。
常见问题 FAQ
Q1：为什么热力图的热点总是偏一点？
A：大概率是坐标系用错了。检查一下是不是用了clientY而不是pageY。
Q2：移动端的热力图怎么做？
A：移动端用touch事件，并且要注意设备像素比（devicePixelRatio）。
Q3：iframe 里的点击怎么统计？
A：跨域iframe里的点击拿不到父页面的坐标。同域的可以传消息，跨域的就只能单独埋点了。
Q4：热力图的数据量会不会很大？
A：会。我一般会做抽样，比如随机上报10%的点击事件。
参考来源
MDN: MouseEvent.pageX 文档
W3C Pointer Events Level 2 规范
