将 canvas 渲染拆分为长任务的核心做法是使用 requestanimationframe 或 settimeout 将绘制逻辑分片，并在每帧之间让出主线程控制权。具体实现时，需要维护一个待绘制的对象队列或索引范围，在回调中仅处理当前帧能完成的子集，并检查剩余工作量以决定是否继续下一帧。这样做可以避免阻塞用户交互和页面响应，确保帧率稳定。
如何基于对象列表实现分批渲染
通过维护一个全局索引指针，每次动画帧只处理固定数量的对象，直到所有对象绘制完毕。这种方法适用于静态场景的逐步加载或复杂场景的平滑展示。
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 模拟大量绘图对象
const objects = Array.from({ length: 1000 }, (_, i) => ({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
color: `hsl(${Math.random() * 360}, 70%, 50%)`
}));
let currentIndex = 0;
const BATCH_SIZE = 50; // 每帧处理50个对象
function renderBatch() {
const end = Math.min(currentIndex + BATCH_SIZE, objects.length);
for (let i = currentIndex; i < end; i++) {
const obj = objects[i];
ctx.fillStyle = obj.color;
ctx.fillRect(obj.x, obj.y, 10, 10);
}
currentIndex = end;
if (currentIndex < objects.length) {
requestAnimationFrame(renderBatch);
} else {
console.log('Rendering complete');
}
}
requestAnimationFrame(renderBatch);
运行上述代码，控制台会在所有方块绘制完成后输出 'Rendering complete'。由于设置了 BATCH_SIZE 为 50，且总共有 1000 个对象，程序会分 20 帧完成渲染。每帧执行时间极短，不会造成主线程阻塞。开发者可以通过调整 BATCH_SIZE 来平衡渲染速度和流畅度。
立即学习“Java免费学习笔记（深入）”；
如何处理动态更新的分片渲染
当绘图对象是动态变化的（如游戏循环），需要在每帧中先清除画布，然后重新计算并绘制当前可见或活跃的对象子集。关键在于区分“新增/移动”的对象和“静止”的对象，或者简单地每帧重绘所有对象但限制单次调用量。
const canvas = document.getElementById('dynamicCanvas');
const ctx = canvas.getContext('2d');
let particles = [];
let particleIndex = 0;
const MAX_PARTICLES = 500;
const DRAW_PER_FRAME = 20;
function addParticle() {
if (particles.length < MAX_PARTICLES) {
particles.push({
x: Math.random() * canvas.width,
y: canvas.height,
vx: (Math.random() - 0.5) * 2,
vy: -Math.random() * 5 - 1,
life: 100
});
}
}
function updateAndRender() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 添加新粒子
if (Math.random() < 0.1) addParticle();
// 分批更新和绘制粒子
let processed = 0;
while (processed < DRAW_PER_FRAME && particles.length > 0) {
const p = particles[particles.length - 1];
p.x += p.vx;
p.y += p.vy;
p.life--;
ctx.fillStyle = `rgba(255, 0, 0, ${p.life / 100})`;
ctx.beginPath();
ctx.arc(p.x, p.y, 5, 0, Math.PI * 2);
ctx.fill();
if (p.life <= 0 || p.x < 0 || p.x > canvas.width) {
particles.pop();
} else {
// 保持顺序，这里简单交换到末尾处理
// 实际应用中可能需要更复杂的队列管理
}
processed++;
}
requestAnimationFrame(updateAndRender);
}
requestAnimationFrame(updateAndRender);
该示例展示了动态场景下的分片处理。每帧最多处理 20 个粒子的更新和绘制。如果粒子数量超过 20 个，未处理的粒子将在下一帧继续处理。这保证了即使粒子数量激增，单帧渲染时间也不会过长。注意，此简化示例中粒子移除逻辑可能不够精确，实际项目中应使用双端队列或索引数组高效管理生命周期。
当渲染队列空了之后程序如何退出
在分批渲染逻辑中，当所有待处理对象都已完成绘制后，程序应当停止请求新的动画帧，以避免不必要的 CPU 占用。通常通过检查索引是否达到总数或队列为空来判断。
在前面的第一个示例中，当 currentIndex 等于 objects.length 时，条件 if (currentIndex 不再满足，因此不会再次调用 <code>requestAnimationFrame，函数自然退出。这种机制确保了任务完成后资源释放。对于动态场景，如第二个示例，只要还有活跃粒子，循环就会持续；一旦粒子全部消亡且不再产生新粒子，虽然 requestAnimationFrame 仍在调用，但内部循环因 particles.length === 0 而快速跳过，几乎不消耗资源。若需彻底退出，可添加标志位或在外部监听状态变化来取消动画帧。
