Question

所以我一直在研究如何在画布动画上改善运动平滑度和性能。

在一些游戏开发论坛上快速谷歌建议使用两个不同的循环一个用于计算，一个用于绘图......示例代码显示如下：

function mainLoop() {
  // all of your logic goes here, moving positions, checking inputs, etc...
  // I guess it's proper to put all drawing to "off screen" canvases here too.
  ...
  setTimeout(mainLoop, 1000 / desiredFPS);
}

function drawingLoop() {
  //only drawing commands to the visible canvas goes here
  ...
  requestAnimationFrame(drawingLoop);
}

//when your assets are loaded you just simply make a 
//call to each loop to get them started...
mainLoop();
drawingLoop();

这实际上是最好的方法吗？

我目前拥有所有逻辑并在同一循环中绘制。我假设两个不同的循环实际上会降低帧速率以及它的平滑度吗？

我目前的做法更像是这样：

function loop() {
  calculate(); // calculate everything
  draw();      // draw everything
  requestAnimationFrame(loop);
}    
loop();

为什么建议做两个不同的循环是否有任何利弊这样做？

Answer 1

如果您想提高效果并将计算与实际渲染分离，您应该查看MDN或HTML5 rocks上的WebWorkers。它们基本上是各种线程，可以让你从主线程中卸载一些工作。

但是当涉及到perf时，你应该看看Chrome中的perf工具，这可能会帮助你揭穿代码的其他重要部分。看看doc for the CPU profiling

两个不同的循环用于计算和绘图

1 个答案: