更新Chrome到116版本后,HTML画布的drawImage突然慢了20倍:
Chrome/114.0.0.0 - created 300 canvases in 30ms, drawImage in 39ms
Chrome/116.0.0.0 - created 300 canvases in 15ms, drawImage in 817ms
这会使绘制图像的速度慢20倍。我在Ubuntu 22.04 64bit上如果你想测试旧版本的Chrome,你可以从https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Linux_x64%2F1135561%2Fchrome-linux.zip?generation=1682460989187924&alt=media下载
这发生在114和116之间,我找不到115来进一步缩小范围。
下面是最小的测试代码:
// Create 300 canvases 25x25 to show creating canvases did not slow down
var t1 = Date.now(),
i, can = [],
o, img, log = '';
for (i = 0; i < 300; i++) {
o = {};
o.canvas = document.createElement('canvas');
o.context = o.canvas.getContext('2d');
o.canvas.width = 25;
o.canvas.height = 25;
can.push(o);
}
log += 'created 300 canvases in ' + (Date.now() - t1) + 'ms, ';
// create one 1000x1000 canvas to be used as source image
t1 = Date.now();
img = {};
img.canvas = document.createElement('canvas');
img.context = img.canvas.getContext('2d');
img.canvas.width = 1000;
img.canvas.height = 1000;
log += 'created big canvas in ' + (Date.now() - t1) + 'ms, ';
// draw image to all 300 canvases
t1 = Date.now();
for (i = 0; i < can.length; i++) {
can[i].context.drawImage(img.canvas, 0, 0);
}
console.log('drawImage in ', Date.now() - t1);
log += 'drawImage in ' + (Date.now() - t1) + 'ms, ';
log += window.navigator.userAgent + '<br>';
document.body.innerHTML = log;
<pre id="log"></pre>
1条答案
按热度按时间vltsax251#
此错误已在Chrome/Chromium版本117中修复