DOM 与 Canvas

你是否知道，你在浏览器中显示内容的方式其实有多种选择？没错，确实如此！目前最常见的方式是通过操作DOM元素来实现内容的展示。这也是你（以及世界上99%的人）创建HTML、CSS和JavaScript，并让页面元素“神奇”地出现在屏幕上的方式。另一种方式则使用canvas元素。在canvas中，你需要手动指定屏幕上要绘制和显示的每一个细节。这两种方法各有适用场景。对于你即将开发的视觉效果复杂的项目来说，了解何时该使用哪种方式，是非常重要的。

为了帮助你更好地理解这一点，让我们先退一步，甚至多退几步，来看看这两种方法是如何映射到浏览器将你的意图转化为可视内容的过程中的。这一转换的核心涉及两种模式：保留模式（Retained Mode）和立即模式（Immediate Mode）。虽然现在可能还不明显，但深入理解这两种模式的细节，将有助于你判断何时应依赖DOM API，何时应使用canvas来呈现视觉内容。

继续往下看！

保留模式（DOM）

在保留模式系统中，你让内容显示在屏幕上的方式，是将你的期望、构想和需求发送给浏览器的图形API。这个API就像圣诞老人一样，会满足你提出的所有要求。

下图大致描述了你、图形API与浏览器之间的分工关系：

黄色方框代表构成你应用的HTML、CSS和JavaScript。尽管你可能从未以这种方式思考过你的标记语言和代码，但实际上，你所定义的几乎每一项内容，都只是一条绘图指令，告诉浏览器应该在屏幕上显示什么。

这种从原始标记和代码到可视化结果的转换过程，由浏览器的图形API完成。该API接收你的描述，生成一个内存中的模型（通常称为场景、对象列表或显示列表），用以表示最终输出的样子。一旦模型建立完成，最后一步就是将其转换为浏览器能够理解的底层绘图命令。

整个过程在后台无缝进行。你只需定义好应用，而如何将你定义的内容转化为可显示的结果，都会自动为你处理。

立即模式（Canvas）

与保留模式带来的温和便利形成鲜明对比的是立即模式，在这种模式下……嗯，我们先看看这张图：

在立即模式系统中，你需要承担全部工作量。你不仅要明确指出需要绘制的内容，还要自行创建并维护整个模型。不仅如此，你还必须主动发出绘图命令，才能让浏览器更新画面。此时，浏览器的图形API——在保留模式中曾为你做了大量工作的那个API——在这里作用有限，它只是接收你的绘图指令并将其发送给浏览器执行。

在HTML中，立即模式体现在使用canvas元素时。如果你希望在canvas中绘制任何内容，就必须手动发出基础的绘图命令，并自行管理场景状态，以及在发生变更时重新绘制。