DOM是Web渠道编程模型的根底，其规划和功用直接影响着浏览器管道(Pipeline)的模型，可是，DOM的前史演化却远不是一个简略的工作。
在曩昔三年中，微软的安全专家们早现已开端在Microsoft Edge上对DOM进行了重构，这次重构的首要方针便是要建立一个愈加先进的架构，供给更好的实际操作功用和愈加简练的操作。在这篇文章中，微软的安全专家们将引导咱们来了解Internet Explorer和Microsoft Edge中DOM的前史演化进程，以及他们在这几年对DOM树先进化演化的影响。现在咱们现已能看到新的DOM架构对Windows 10 Creators Update功用大幅提高的协助：

安全专家们以为真实的DOM架构应该是几个子体系的彼此和谐与协作，比方在Microsoft Edge中，就包括 *** 中的事情绑定，事情捕获，事情修改，拼写查看，HTML特点，CSSOM，文本设置和其他一切相关的功用。在这些子体系中，DOM树正坐落中心。

由上图能够看出，DOM真的是构成Web编程模型的几个子体系的和谐。但这仅仅DOM十分外表的东西，真实的一些内部细节，还要从DOM的前史开端说起。
Internet Explorer DOM树的前史
现在的 *** 开发人员一提起DOM，就通常会想到一棵看起来像这样结构的树：

可是，实际操作却并不是像咱们想的这么简略，比方，Internet Explorer的DOM完结就适当的杂乱。
简略来说，Internet Explorer的DOM便是为了满意90年代的网页规划的，其时规划原始数据结构时，Web首要是一个文档查看器，顶多包括几个动画GIF和几幅图画。因而，DOM的算法和数据结构更接近于Microsoft Word这样的文档查看器。回想前期的 *** ，因为JavaScript不允许脚本化网页，所以咱们所了解的DOM树根本就不存在。当是，因为文本是首要的完结手法，所以DOM的内部规划都是环绕快速，高效的文原本进行存储和操作的。WYSIWYG富文本修改器便是当是的产品，专门用于字符刺进和有限的格式化。
以文本为中心的规划
作为以文本为中心的规划成果，DOM的原理结构便是为文本存储做准备的，这是一个杂乱的文本数组体系，能够通过最少或在没有内存分配的情况下进行高效拆分和衔接。存储功用能够将文本和标签标明为线性进程，可由大局索引或字符方位（CP）寻址。在给定的CP中刺进文本是十分高效的，而且通过高效的“拼接”操作会集仿制或张贴一系列文本。下图就清楚的标明如何将包括“hello world”的简略符号加载到文本存储中，以及如何为每个字符和标签分配CP。

为了存储非文本数据，例如，格式化和分组信息，另一组方针的存储就有必要独自保护，比方，树方位（TreePos方针）的双向链接列表。 TreePos方针是HTML源符号中的标签语义，每个逻辑元素由开端和完毕TreePos标明。这种线性结构使得在深度优先时，能够很快的遍历整个DOM树，简直每个DOM都需求搜索API，CSS以及布局算法。之后，安全专家们将TreePos方针扩展到别的两种“方位”：TreeDataPos（用于指示文本的占位符）和PointerPos（用于指示刺进符号，规模边界点，如生成的内容节点）。
每个TreePos方针还包括一个CP方针，它作为标签的大局序数索引（关于像legacy document.all API这样的东西有用）。从TreePos进入文本存储时要用到CP，通过比较节点次序，乃至减去CP索引来查找文本的长度。
为了将这些节点整合在一起，TreeNode将会把它们绑定在一起，并建立了JavaScript DOM所希望的“树”的层次，如下所示。

添加杂乱层次
原有的这些CP根底造成了DOM极端杂乱，为了使整个体系能高效的运转，CP有必要是最新的。因而，在每次DOM操作之后，例如输入文本，仿制或张贴，DOM API操作，乃至点击页面在DOM中设置刺进点都能够更新CP。开端，DOM操作首要由HTML解析器或用户操作驱动，所以CP始终坚持最新的模型是彻底合理的。可是跟着JavaScript和DHTML的鼓起，这些操作变得越来越遍及和频频。
为了坚持本来的更新速度，DOM添加了新的结构而且扩展树(SplayTree)也随之发生，扩展树是在TreePos方针上添加了一系列堆叠的树衔接。首要这些杂乱结构的添加提高了DOM的功用，能够用O（log n）速度完结大局CP更新。可是，扩展树实际上仅针对重复的本地搜索进行优化。
另一个在规划中呈现的现象便是前面说到的仿制或张贴的“拼接”操作被扩展到处理一切的树骤变中。中心的拼接功用分三步进行，如下图所示。

在过程1中，拼接将通过从操作开端到操作完毕遍历树形方位来记载拼接信息。然后创立一个拼接记载，其间包括此操作的指令指令。
在过程2中，与该操作相关联的一切节点，即，TreeNode和TreePos方针会从树中删去。要注意的是，在IE DOM树中，TreeNode / TreePos方针与脚本引证的Element方针不同，以便于堆叠标签，因而删去它们不是从功用方面考虑的。
在过程3中，运用拼接记载来从头创立方针方位中的新方针。例如，为了完结一个appendChild DOM操作，splice创立了一个环绕节点的规模（从TreeNode开端到TreePos结束），将本来方位的修改规模通过拼接，创立了新的节点来标明节点及其子节点的新方位。我们能够幻想一下，这样一来尽管发明了许多内存分配，但算法的速度也降低了许多。

[1] [2] [3]  黑客接单网