为什么调用sleep(0)后Firefox的Canvas性能会出现大幅下降？

Firefox的Canvas 2D上下文采用延迟渲染架构：

• 调用fillRect等绘制API时，指令不会立刻提交到GPU执行，而是暂存在CPU端的渲染队列中
• Test1场景下，绘制完成后立刻调用getImageData，浏览器会先批量执行队列中所有未提交的绘制指令，同时将整个Canvas的像素数据一次性同步到CPU内存缓存，后续逐列读取像素时直接调用缓存数据，仅触发1次GPU-CPU同步
• Test2场景下，绘制完成后执行await sleep(0)会将执行权交还给浏览器主线程，主线程会在间隙完成绘制指令提交、清空CPU端队列，同时将GPU端的Canvas纹理标记为未同步到CPU。后续逐列调用getImageData时，每一次调用都会触发独立的GPU-CPU同步操作，2048次调用就会产生2048次同步开销，整体耗时就会出现指数级上涨。

Chrome的Canvas实现额外做了自适应预缓存优化，检测到多次连续getImageData调用时，无论中间是否出现过主线程让出，都会自动全量同步Canvas像素到CPU缓存，因此不会出现该性能问题。

1. 优化读取逻辑，一次性读取整个Canvas的像素数据再做运算，仅触发1次GPU同步，修改后的代码如下：

let doTest = (() =>
{
    const ctx = canvas.getContext('2d');
    // 单次全量读取，大幅降低同步开销
    const data = ctx.getImageData(0,0,SIZE,SIZE);
    let sum = 0;
    for (let i=0; i<data.data.length; i+=4)
        sum += (data.data[i+0]*.299 + data.data[i+1]*.587 + data.data[i+2]*.114);
    return sum/SIZE/SIZE;
});

2. 如果业务必须分段读取像素，确保所有读取操作在绘制完成后的同一个同步JS执行块内完成，不要在绘制和读取之间插入await、setTimeout等会让出主线程的操作。
3. 若确实无法避免在绘制和读取之间让出主线程，可以在第一次读取前先主动调用一次全量getImageData触发全量同步，后续的分段读取会直接使用CPU缓存，不会产生额外的同步开销。

内容的提问来源于stack exchange，提问作者Treeston