在 Google Chrome 的 Task Manager 中，您可以看到某个页面所使用的内存量（也称为 RAM）。Chrome 也提供 GPU 内存，或者是 GPU 正在使用的内存。这是常见信息，如几何形状、纹理或计算机将您的画布数据推送到屏幕可能需要的任何形式的缓存数据。内存越低，放在计算机上的权重就会越少。虽然目前还没有任何确切的数字作为依据，但应始终对此进行测试，确保您的程序不会超出极限，并使用了过多的内存。如果使用了过多的内存，浏览器或页面就会因为缺乏内存资源而崩溃。GPU 处理是一个远大的编程追求，已超出本文的讨论范围。您可以从学习 OpenGL 或查阅 Chrome 的文档（请参阅参考资料）开始。
表 1. 画布层的内存开销
在表 1中，随着在页面上引入和使用了更多的 HTML5 画布元素，使用的内存也越多。一般的内存也存在线性相关，但每增加一层，内存的增长就会明显减少。虽然这个测试并没有详细说明这些层对性能带来的影响，但它确实表明，画布会严重影响 GPU 内存。一定要记得在您的目标平台上执行压力测试，以确保平台的限制不会导致您的应用程序无法执行。
当选择更改某个分层解决方案的单一画布渲染周期时，需考虑有关内存开销的性能增益。尽管存在内存成本，但这项技术可以通过减小每一帧上修改的像素数量来完成其工作。
下一节将说明如何使用分层来组织一个场景。
对场景进行分层：游戏
在本节中，我们将通过重构一个滚动平台跑步风格的游戏上的视差效果的单画布实现，了解一个多层解决方案。图 2显示了游戏视图的组成，其中包括云、小山、地面、背景和一些交互实体。
图 2. 合成游戏视图
在游戏中，云、小山、地面和背景都以不同的速度移动。本质上，背景中较远的元素移动得比在前面的元素慢，因此形成了视差效果。为了让情况变得更为复杂，背景的移动速度会足够慢，它每半秒钟才重新渲染一次。
通常情况下，好的解决方案会将所有帧都清除并重新渲染屏幕，因为背景是一个图像并且在不断变化。在本例中，由于背景每秒只需变化两次，所以您不需要重新渲染每一帧。
目前，您已经定义了工作区，所以可以决定场景的哪些部分应该在同一个层上。组织好各个层之后，我们将探讨用于分层的各种渲染策略。首先，需要考虑如何使用单个画布来实现该解决方案，如清单 3所示。
