问HTML5画布性能和优化技巧、技巧和编码最佳实践

EN

重绘区域

动画的最佳画布优化技术是限制每个帧上被清除/绘制的像素的数量。实现最简单的解决方案是重置整个画布元素并重新绘制所有内容，但对于浏览器来说，这是一个昂贵的操作。

在帧之间重用尽可能多的像素。这意味着每帧需要处理的像素越少，程序运行的速度就越快。例如，当使用clearRect(x，y，w，h)方法擦除像素时，只清除和重新绘制已更改的像素而不是整个画布是非常有益的。

程序雪碧

程序生成图形通常是要走的路，但有时这并不是最有效的方法。如果你用实心填充绘制简单的形状，那么按程序绘制它们是最好的方法。但是如果你用笔画、渐变填充和其他性能敏感的化妆来绘制更详细的实体，你最好使用图像精灵。

两者兼而有之是可能的。在应用程序启动时，在画布上按过程绘制图形实体一次。在此之后，您可以通过绘制它们的副本来重用相同的精灵，而不是重复生成相同的阴影、渐变和笔画。

状态堆栈与变换

可以通过诸如旋转和缩放等转换操作画布，从而对画布坐标系进行更改。了解有两种方法可用的状态堆栈是很重要的: context.save() (将当前状态推送到堆栈)和context.restore() (恢复到以前的状态)。这使您能够将转换应用于绘图，然后还原回以前的状态，以确保下一个形状不受任何早期转换的影响。州还包括属性，如填充和笔画颜色。

合成

在使用画布时，一个非常强大的工具是合成模式，它允许掩蔽和分层。有大量可用的复合模式，它们都是通过画布上下文的globalCompositeOperation属性设置的。复合模式也是状态堆栈属性的一部分，因此可以应用复合操作、堆栈状态和应用不同的状态，并在创建第一个状态之前恢复到状态。这可能特别有用。

抗锯齿

为了允许亚像素的绘图，画布的所有浏览器实现都采用了反混叠(尽管这似乎不是HTML5规范中的要求)。如果你想画出清晰的线条，并且注意到结果看起来很模糊的话，反混叠可能是很重要的。这是因为浏览器会插入图像，就好像它实际上是在这些像素之间一样。它的结果是一个更流畅的动画(你真的可以移动半像素每次更新)，但它会使你的图像看起来模糊。

要解决这个问题，您将需要整数值，或抵消半像素取决于您是绘制填充或笔画。

对drawImage() x和y位置使用整数

如果在画布元素上调用drawImage，则如果将x和y的位置舍入整数，速度要快得多。

这里有一个关于jsperf的测试用例显示使用整数的速度比使用小数快得多。

所以在渲染之前，把x和y的位置舍入整数。

比Math.round()更快

另一个jsperf测试显示表示，Math.round()不一定是舍入数字最快的方法。实际上，使用逐位攻击的速度比内置方法要快。

帆布雪碧优化

清理画布

要清除所有现有像素的整个画布，通常使用context.clearRect(x、y、w、h)，但还有另一个可用的选项。每当设置画布的宽度/高度时，即使它们被反复设置为相同的值，画布也会被重置。当使用动态大小的画布时，这一点很好，因为您会注意到绘图正在消失。

计算分布

Chrome开发工具分析器对于找出性能瓶颈是非常有用的。根据应用程序的不同，您可能需要重构程序的某些部分，以提高性能和浏览器如何处理代码的特定部分。

优化技术

这是我的建议

1)使用clearRect清除画布而不是canvas.width=canvas.width，因为稍后会重置画布状态

2)如果在画布上使用鼠标事件，则使用以下功能，它是可靠的，并且在大多数情况下都能工作。

/**  returns the xy point where the mouse event was occured. 
 @param ev The event object.
*/
function getXY(ev){
   return getMousePosition(ev, ev.srcElement || ev.originalTarget);
}

 /**  returns the top-left point of the element
       @param elem The element
   */
function getElementPos(elem){
   var obj = elem;
   var top = 0;
   var left = 0;
    while (obj && obj.tagName != "BODY") {
      top += obj.offsetTop-obj.scrollTop;
      left += obj.offsetLeft -obj.scrollLeft ;
      obj = obj.offsetParent;
     }
  return {
    top: top,
    left: left
    };
};

/**  returns the xy point where the mouse event was occured inside an element. 
@param ev The event object.
 @param elem The element
*/
function getMousePosition(evt, elem){
var pageX, pageY;
if(typeof(window.pageYOffset)=='number') {
    pageX=window.pageXOffset;
    pageY=window.pageYOffset;
}else{
    pageX=document.documentElement.scrollLeft;
    pageY=document.documentElement.scrollTop;
}
var mouseX = evt.clientX - getElementPos(elem).left + pageX;
var mouseY = evt.clientY - getElementPos(elem).top + pageY;
return {
    x: mouseX,
    y: mouseY
};
};

3)如果您想支持ExplorerCanvas，可以使用IE7

4)不只是清理整个帆布，而是清除需要清理的部分。这对表演很有好处。

在完成了最近发布了使用画布的Facebook应用程序和用户Facebook配置文件信息(它必须容纳的数据量对一些人来说是巨大的)来匹配你和你的朋友使用该应用程序之后，我已经学到了很多东西，在我的广泛努力中，我可以尽我所能提高应用程序的性能。

我确实花了几个月，几天的时间，只是为了重新分析我已经非常熟悉的代码，并认为这是最理想的方法。

尽可能使用DOM元素

事实上，浏览器还没有准备好在画布中处理更密集的运行应用程序，特别是当您需要开发支持IE8的应用程序时。在编写本文时，有时DOM比Canvas API的当前实现速度更快。至少我发现它是在为三星开发一个非常复杂的单页动画html5和画布应用程序时发现的。

我们能够很好地改善事物的性能，同时仍然使用画布做一些复杂的工作，将图像裁剪成圆圈，这可能是可以坚持我们是如何做的。

在发布前几天，我们决定尝试一种不同的技术，而不是在屏幕外创建临时画布，这些画布一旦裁剪成圆圈，就会被放置在可见的画布上。我们只是在画布上添加了Image元素，使用了之前用于放置临时画布的x和y坐标。

对于将图像裁剪成圆圈，这很简单，我们只是使用CSS3边界-半径属性来完成它，这比复杂的状态变化系列要少得多，而且虽然巧妙和有创意，但过度使用了.clip()方法。

一旦将它们放置在DOM中，图像的动画就会发生，每个图像的DOM节点就会被动画化为画布上的单独实体。我们可以通过CSS轻松地完全控制样式的那些。

这种技术类似于另一种方法，用于完成这类工作，这也是很好的了解，它涉及到层叠画布在彼此之上，而不是画他们到一个上下文。