Chrome浏览器下,使用drawImage函数,从Canvas A拷贝到Canvas B, 性能经常出乎我意料(的差),折腾半天找到原因,特此记录。
以下内容,搬运自The Chromium Projects / report bugs,为确保无误,建议查看原答案。
size of canvas A | size of canvas B | performance | |
---|---|---|---|
1 | >= 256 * 256 | >= 256 * 256 | very good |
2 | < 256 * 256 | < 256 * 256 | good |
3 | < 256 * 256 | >= 256 * 256 | not bad |
4 | >= 256 * 256 | < 256 * 256 | bad |
- 1:两个canvas大小均大于256*256,都使用显卡渲染(HW)
- 2:两个canvas大小均小于256*256,都使用CPU渲染(SW)
- 3:前者使用SW,后者使用HW(RAM拷贝到GPU)
- 4:前者使用HW,后者使用SW(GPU拷贝到RAM,性能极差,不过可以通过设置chrome://flags/ Accelerated 2D canvas 为 Disabled,来禁用GPU加速,性能会有提高)
可以发现,当源或目标画布在RAM中而另一个画布在GPU上时,会发生减速。
当画布尺寸比较大,比如 8192*8192,这时候就需要查看GPU支持最大纹理大小,当GPU无法为整个画布分配存储单元时,会回到CPU渲染途径,然而靠CPU渲染这么大的画布时,性能是比较差的。
网友评论