已设置willReadFrequently仍触发Chrome Canvas2D警告问题排查

这确实是Chrome 104-108版本在WebWorker环境下处理OffscreenCanvas的已知Bug。

问题原因 #

Chrome在该版本区间内，WebWorker中初始化OffscreenCanvas的2D上下文时存在逻辑疏漏：即使显式传入willReadFrequently: true参数，浏览器也没有正确标记该上下文为高频读取模式，导致后续调用getImageData时依然触发性能警告。而主线程环境下的Canvas上下文不受此Bug影响，设置该属性能正常生效。这个问题在Chrome 109版本中已被官方修复。

解决/规避方案 #

• 升级Chrome版本：直接升级到109及以上版本，警告会自动消除。
• 减少getImageData调用次数：如果暂时无法升级浏览器，可以尝试一次性读取更大范围的像素数据，减少重复调用getImageData的次数，既能降低警告出现的频率，也能提升性能。
• 改用ImageBitmap操作：业务逻辑允许的情况下，在WebWorker中使用createImageBitmap处理图像数据，替代频繁调用getImageData的方式，也能规避该警告。

触发警告的代码示例 #

const offdesireCtx = offDesire.getContext("2d", { willReadFrequently: true });
if (!offdesireCtx) {
    throw new Error("Desired OffscrenCanvas ctx undefined");
}

const offGetCtx = offGet.getContext("2d", { willReadFrequently: true });
if (!offGetCtx) {
    throw new Error("Get OffscrenCanvas ctx undefined");
}

var imgd = offdesireCtx.getImageData(0, 0, tileSize, tileSize), pix = imgd.data; //Warning triggers
var imgdGet = offGetCtx.getImageData(0, 0, tileSize, tileSize), pixGet = imgdGet.data; //Warning triggers

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