Tag: requestanimationframe

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帧的开头绘制它？ […]