DOM与虚拟DOM

毕设和论文结束后，回挖自己的印象笔记，这段时间整理一下，开始发些Blog，希望对同阶段的同学有帮助，如果有误，望指出

什么是DOM

DOM标准其实包含了三个内容，

1. 核心DOM，针对所有结构化文档
2. XML DOM，针对XML文档
3. HTML DOM，针对HTML文档

我们平时所说的DOM指HTML DOM，DOM定义了所有HTML元素的对象和属性以及访问方法，我们可以操作DOM来增删改查HTML元素。

---

DOM操作的弊端

然鹅，用JS和Jquery操作DOM的代价是很高的，因为浏览器的渲染引擎的工作方式是这样的：

1. 构建DOM树----------（分析HTML元素）
2. 创建StyleRules样式表---（分析CSS）
3. 构建Render树--------（将DOM树和样式表关联）
4. Layout布局---------（为Render树节点确定显示坐标）
5. Painting绘制--------（在显示器上绘制出来）

整个流程不是完全独立的，会出现一边加载、一边解析、一边渲染的现象。

每一次操作DOM，就会即时走一次以上的流程，（十次操作跑十次，想想头皮都发麻），结果：浪费性能，卡顿。

为了解决这个问题，我们诞生了虚拟DOM。

---

什么是虚拟DOM

虚拟DOM的由React和Angular诞生，Vue也用作核心技术。

1. 本质上是用JS对象作为数据结构copy一个DOM
2. 批量操作DOM时，并不会马上去修改真实DOM，而是，通过Diff算法保存到虚拟DOM（即操作内存中的JS对象，这样也能更快）
3. 最后虚拟DOM再一次性映射为真实DOM，继续走流程（人家跑十圈的事情，我只用在起点磨蹭一下，跑一圈）

结果：优化了流程，节省了性能，但也增加了一丢丢内存开销

---

参考： www.w3school.com.cn/htmldom/dom… www.runoob.com/jsref/dom-o… www.jianshu.com/p/af0b39860…