Html5 Canvas＆＃34;复合图层＆＃34;导致长帧

Question

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

使用Chrome DevTools进行分析，似乎是脚本，渲染和＆amp ;;绘制每个帧最多只有几毫秒。然而，在20到40毫秒之间仍然存在很长的帧。

时间表显示，在几乎所有这些情况下，＆＃34;响应＆＃34; 超出了框架的长度和/或＆＃34;复合材料图层＆＃34; 也会发生在最后。

这实际上就是我使用 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);

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

即使如此，我也很困惑为什么在脚本和复合层之间有这么多空闲时间＆＃34;对于每一帧。 所以......

• 有没有办法控制＆＃34;复合层＆＃34;被称为？

• 我应该保存每条更新讯息中的数据，只在下一个动画帧的开头画出数据吗？

• 什么是＆＃34;响应＆＃34;指的是？

谢谢！

Answer 1

Chrome，渲染选项和视频驱动程序的版本都可能会影响这一点。在您的问题上发布该信息。还可以尝试搜索Chromium bug列表。

您还可以尝试使用Firefox的最新开发版本，通过使用多个过程可以获得更好的性能。

要确定服务器响应等是否与性能有关，请将其删除并仅使用来自客户端的虚假数据作为测试。