在画布上使用html元素的性能注意事项

Question

众所周知，如果你有一个flash元素之上的html元素（例如带有列表的模态窗口）你会遇到巨大的性能问题导致flash导致浏览器重绘其顶部的任何html而flash是动画。我想知道如果你在动画画布元素上面有html元素会发生同样的情况。

我问这个因为我正在构建一个画布游戏，我想知道使用DOM制作GUI（菜单，导航按钮等）是不是一个好主意，而不是在画布上绘制它。

Answer 1

我刚刚使用Chromium版本28.0.1500.45 Mageia.Org 3（205727）进行测试，并且在我的画布动画时不会重新绘制元素。

我尝试了this简单的盒子动画，上面有DIV。之后，我描述了我的应用程序，看看发生了什么。我注意到只有画布被重新粉刷。

window.requestAnimFrame = (function(callback) {
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
  function(callback) {
    window.setTimeout(callback, 1000 / 60);
  };
})();
var GX = 0;
function animate() {
  var canvas = document.getElementById('jaja');
  var context = canvas.getContext('2d');
  // update
  GX += 10;
  if (GX > 500) GX = 0;
  // clear
  context.clearRect(0, 0, canvas.width, canvas.height);
  // draw stuff
  context.beginPath();
  context.rect(GX, 10, 100, 100);
  context.fillStyle = '#8ED6FF';
  context.fill();
  context.lineWidth = 1;
  context.strokeStyle = 'black';
  context.stroke();
  requestAnimFrame(function() {
    animate();
  });
}  // request new frame

接下来，我尝试通过选择文本来重新绘制DIV。这一次是的，DIV重新粉刷了。

以下是profile的屏幕截图。

1：每次动画时我们都可以调用Paint（600x586）。

2：仅在我选择文本时才为DIV元素调用Paint。

我个人不相信任何其他浏览器会有不同的行为。

Answer 2

是的，将其他DOM元素放在canvas元素之上会降低其性能。

这是因为浏览器在更新画布/绘画时必须做额外的剪辑。

画布需要每秒更新60次才能输出到屏幕。如果有东西在顶部，它需要被修剪多次。如果重新绘制DOM元素将依赖于浏览器，但 canvas 元素本身的性能会降低。

通常DOM绘制发生在一个线程中（但是对于大多数主流浏览器而言即将发生变化），因此如果该线程上有额外的负载，它也将影响其他所有绘制的内容。

还有用于更新画布的JavaScript的单线程。如果canvas的性能低于执行其更改的脚本（以及对DOM的更改）也会受到影响。