"PointerEvent 合并采样：getCoalescedEvents 的性能实践"

---

title: "PointerEvent 合并采样：getCoalescedEvents 的性能实践"

keywords:

• PointerEvent
• getCoalescedEvents
• 采样率
• 绘图
• 性能

description: "说明 getCoalescedEvents 的事件合并与高频输入采样策略，在绘图与签名场景降低抖动与提升平滑度，并提供示例与兼容建议。"

categories:

• 文章资讯
• 技术教程

---

概述

高频输入（触控/笔）在事件回调前可能被浏览器合并为多个样本。getCoalescedEvents() 允许获取这些合并事件，实现更平滑的绘制与更准确的路径记录。

示例

canvas.addEventListener('pointermove', e => {
  const events = e.getCoalescedEvents?.() || [e]
  for (const ev of events) drawLine(ev.clientX, ev.clientY)
})

工程建议

• 性能与内存：批处理样本并减少重复绘制；控制刷新率与队列长度。
• 兼容：特性检测后回退；在不支持环境进行插值与平滑。
• 与压感：结合 pressure/tilt 等属性记录更丰富的笔输入信息。

参考与验证

• MDN PointerEvent 文档：https://developer.mozilla.org/docs/Web/API/Pointer_events
• Chrome 平台文档（coalesced events）：https://developer.chrome.com/docs/web-platform/precision-pointer-events/