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

--- title: "PointerEvent 合并采样：getCoalescedEvents 的性能实践" keywords: - PointerEvent - getCoalescedEvents - 采样率 - 绘图 - 性能 description: "说明 `getCoalescedEvents` 的事件合并与高频输入采样策略，在绘图与签名场景降低抖动与提升平滑度，并提供示例与兼容建议。" categories: - 文章资讯 - 技术教程 --- 概述 高频输入（触控/笔）在事件回调前可能被浏览器合并为多个样本。`getCoalescedEvents()` 允许获取这些合并事件，实现更平滑的绘制与更准确的路径记录。 示例 ```js 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/