我为我的游戏编写了一个小型图形引擎，它在树中有多个画布（这些基本上代表图层。）每当图层中的某些内容发生变化时，引擎会将受影响的图层标记为“污染”并在渲染代码中受影响最低的图层通过drawImage（）复制到其父图层，然后将其复制到其父图层，依次复制到根图层（屏幕画布上）。这可能导致每帧多次drawImage（）调用，但也会阻止重新渲染受影响层下面的任何东西。但是，在没有任何变化的帧中，没有渲染或drawImage（）调用发生，并且在只有前景对象移动的帧中，渲染和drawImage（）调用是最小的。
我想将此与将多个屏幕画布用作图层进行比较，如本文所述：
http://www.ibm.com/developerworks/library/wa-canvashtml5layering/
在屏幕画布方法中，我们处理每层渲染，让浏览器处理正确显示屏幕上的图层。从我已经完成的研究和我读过的所有内容来看，这似乎被普遍认为可能比使用drawImage（）手动处理它更有效。所以我的问题是，尽管我的内部知识确切地知道每个帧的变化是什么，浏览器能否确定哪些需要比我更有效地重新渲染？
我已经知道这个问题的答案是“两种方式和基准。”但是为了获得准确的数据，我需要现实世界的应用程序，而这需要几个月的时间。到那时，如果我有一个可接受的方法，我将有更大的鱼炒。因此，我希望有人能够走这条路，并能对此提供一些见解。
答案 0 :(得分：2)
当涉及到canvas元素和渲染时，浏览器无法确定任何内容，因为它是一个被动元素 - 其中的所有内容都是通过JavaScript进行的用户呈现。浏览器唯一能做的就是将画布上的内容传输到显示器上（当需要重新分配位图时，会不时地更清楚地清除它）。
遗憾的是，对于什么是最佳优化没有黄金法则/答案，因为这会因具体情况而异 - 有许多技术可以提及，但它们只是工具你可以使用但是你仍然需要弄清楚什么是正确的工具或适合你特定情况的工具组合。也许分层在一种情况下是好的，也许它不会给另一种情况带来任何好处。
通常，优化是对场景特定模式的深入分析和细分，然后进行隔离和优化。这个过程如果经常进行实验，基准测试，重新调整，实验，基准测试，重新调整，实验，基准测试，重新调整...当然经验将这个过程减少到最低限度，但即使有经验，细节也会出现在各种各样的仍然需要根据具体情况进行微调的组合（假设它们不相同）。
即使您找到适合当前项目的良好配方，也不会认为它对您的下一个项目最佳。这是没有人能够对这个问题给出确切答案的一个原因。
然而，当它来到画布时，你想要实现的是最少的清晰操作和最小的重绘区域（drawImage或形状）。图层的要点是将元素组合在一起以实现此目标。