节流闭包通过控制绘制频率（如60ms一次）避免高频坐标导致的canvas掉帧，其核心是延迟执行并合并中间坐标；配合像素去重、网格聚类和动态抽稀可进一步优化性能。
节流闭包本身不直接渲染，而是控制“什么时候该触发一次重绘”，尤其适合处理高频坐标输入（如地图拖拽、实时轨迹上报、鼠标移动跟踪等）——它把原本每毫秒都可能调用的绘制逻辑，压缩成固定间隔内最多执行一次，从而避免 canvas 频繁 clear + draw 导致掉帧。
为什么原始坐标流需要节流
海量位置点（比如物流车辆每 200ms 上报一个经纬度）若逐帧绘制，会出现两个问题：
- canvas 每次 clearRect + 多个 fillRect/arc 都是重绘操作，高频调用会挤占主线程，导致 requestAnimationFrame 掉帧
- 人眼无法分辨毫秒级变化，连续绘制相邻距离小于 1px 的点，视觉上完全重叠，纯属冗余计算
写一个轻量节流闭包用于坐标更新
核心是：只在上一次绘制完成后的指定间隔（如 60ms ≈ 16.7ms × 3～4 帧）才允许下一次绘制请求进入队列，并自动合并中间所有新坐标。
示例代码（无依赖，可直接使用）：
function createThrottledRenderer(drawFn, delay = 60) {
let isPending = false;
let latestPoints = [];
<p>return function(points) {
latestPoints = points; // 总是保留最新一批坐标
if (!isPending) {
isPending = true;
setTimeout(() => {
drawFn(latestPoints); // 执行实际绘制
latestPoints = [];
isPending = false;
}, delay);
}
};
}</p><p>// 使用方式
const render = createThrottledRenderer((points) => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
points.forEach(p => {
ctx.beginPath();
ctx.arc(p.x, p.y, 2, 0, Math.PI * 2);
ctx.fill();
});
}, 60);</p><p>// 每次收到新坐标就调用（哪怕每 10ms 来一次）
socket.on('position', ({x, y}) => {
positions.push({x, y});
render(positions); // 实际每 60ms 最多执行一次
});
配合降频更进一步：坐标抽稀 + 屏幕空间聚类
节流解决“频率过高”，但若单次传入坐标数仍达上万，drawFn 内部循环依然卡顿。建议在节流前或节流回调中加两层轻量过滤：
-
像素级去重：对 x、y 取整（
Math.round(x)），相同像素位置只留一个点 - 网格聚类：按 4×4 或 8×8 像素划分格子，每个格子取中心点或首个点代表该区域
- 动态抽稀：根据 canvas 当前缩放级别（如 Leaflet 的 zoom）调整抽稀步长，缩放越大，保留越多点
注意和 requestAnimationFrame 的协作
节流闭包用 setTimeout 更可控，但若你已用 requestAnimationFrame 做主渲染循环，可改用帧节流：
- 用
rafId标记是否已在下一帧排队 - 每次新坐标来时，取消旧 raf，重新
requestAnimationFrame(() => draw(latestPoints)) - 这样能保证绘制总在帧开始时执行，避免强制同步布局（layout thrashing）
