Html5canvas“复合层”导致长帧

我有一个运行在网页上的javascript客户端，使用requestAnimationFrame绘制到canvas，并通过websockets与我的NodeJS后端服务器（使用服务器端的'ws'模块）进行通信。

通过使用Chrome开发工具进行分析，似乎脚本，渲染和绘制每个帧的时间合计最多只有几毫秒。 然而，从20 – 40ms仍然有很长的框架。

时间表显示，几乎在所有这些情况下，都有一个超过框架长度的“响应”和/或最终发生的“复合层” 。

这基本上是我如何使用requestAnimationFrame ：

function drawGame() { // Drawing to gameCanvas from cacheCanvas // cacheCanvas is updated whenever an update is received from the server ctx.drawImage(cacheCanvas, // source rectangle 0, 0, gameCanvas.width*2, gameCanvas.height*2, // destination 100, 100, gameCanvas.width*2, gameCanvas.height*2 ); requestAnimationFrame(drawGame); } requestAnimationFrame(drawGame); 

服务器在60hz使用setInterval（）发送更新。 当从服务器收到消息时，客户端立即绘制它。 我怀疑这个时间与requestAnimationFrame结合可能是不正确的，并导致框架结尾的复合层。

即便如此，我仍然对为什么在每一帧的脚本和“复合层”之间有太多的空闲时间感到困惑。 所以…

• 有什么办法来控制什么时候“复合层”被称为？

• 我应该保存每个更新消息中的数据，并且只在下一个animation帧的开头绘制它？

• 什么是“回应”是指？

谢谢！

Answer 1

Chrome的版本，渲染选项和video驱动程序可能都会影响到这一点。 与您的问题发布信息。 也可以尝试在Chromium bug列表中search。

您也可以尝试使用多个进程的Firefox应用程序的最新开发版本。

要确定服务器响应等与性能有什么关系，请将其删除，并仅将来自客户端的伪造数据用作testing。