Html5 Canvas"复合图层"导致长帧

Question

我有一个网页上运行,用画JavaScript客户端requestAnimationFrame到画布上,并通过沟通的WebSockets到我的NodeJS后端服务器(使用"WS"模块在服务器端).

使用Chrome DevTools进行分析,似乎每帧的脚本,渲染和绘制的总时间最多只有几毫秒.然而,仍有20至40毫秒的长时间帧.

时间线显示,在几乎所有这些情况下,都存在超过帧长度的"响应"和/或朝向末端发生的"复合层".

这基本上就是我使用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结合可能是不正确的,并且导致帧结尾处的复合层.

即使这样,我也很困惑为什么在每个帧的脚本和"复合层"之间有这么多空闲时间.所以...

• 有没有办法控制何时调用"复合层"？

• 我应该保存每个更新消息中的数据,只在下一个动画帧的开头绘制它吗？

• 什么是"回应"指的是什么？

谢谢!

Answer 1

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

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

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