JS循环使用Canvas绘制导致性能下降。

[neeboo]

使用的 Kraken 版本 ｜ What version of kraken are you using

master v0.8

重现步骤 ｜ Steps To Reproduce

在Loop场景下(比如游戏？)，JS使用Canvas绘制导致性能下降。

重现代码 | Code example:

const canvas = document.createElement('canvas');
canvas.width = screen.width;
canvas.height = screen.height;
const screenHeight = screen.height;
const screenWidth = screen.width;
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
const img = document.createElement('img');
// 资源图片，随便一张都可以
img.src = 'images/bg.png';

function loop(context, top) {
       // 清除上一帧
	context.clearRect(0, 0, screenWidth, screenHeight);

       //主图绘制
      context.drawImage(img, 0, -screenHeight + top, canvas.width, canvas.height);
      context.drawImage(img, 0, top, canvas.width, canvas.height);

       // 位移
	var nextTop = top + 2;
	if (nextTop >= screenHeight) {
		nextTop = 0;
	}
	
       // 帧重绘，用setTimeout也是一样
       requestAnimationFrame((some) => loop(context, nextTop));
}

// 开始循环
loop(ctx,0);

预期结果 ｜ Expected results:

1. 帧率稳定，不卡UI
2. 不会崩溃

实际结果 ｜ Actual results:

1. 帧数迅速下降
2. 一定时间后客户端崩溃

[andycall]

@wssgcg1213 先看下原因是为啥

[wssgcg1213]

Raster 的耗时看起来在叠加

[andycall]

会不会是图片被重复绘制了

[wssgcg1213]

感谢反馈, 问题在 canvas_painter.dart 里

Picture 是个指令收集器, 使用 picture 作为 snapshot 实质上只是让 UI 线程(dart vm)的指令扁平化了, 但是 c++ engine 侧的指令还在累计; 我这边把 Picture 转换为 Image 作为 snapshot 可以解决这个问题, 稍后提一个 PR