JavaScript的DOM树
DOM是结构化文本的抽象表达方式，在一个特定的web环境中它就是HTML文本，HTML中的每一个元素在DOM中有一个对应的节点，而且在HTML中的元素是存在包含关系，DOM节点就构成一个树型结构，称之为DOM树。
浏览器为了渲染和HTML格式的网页，会先把HTML文本解析为DOM树，再根据DOM树渲染出用户所看到的界面，当需要改变的界面的时候，就要修改DOM树上的节点。
浏览器渲染的步骤
- 构建DOM树,display:none的元素也在DOM树中，只是被隐藏起来了；
- 构建CSSOM树；
- 构建渲染树，在DOM节点上找到对应的css规则进行适配；
- 渲染树布局，对节点的位置进行布局【absolute、fixed和float元素位置发生偏移的时候，这一类元素已经脱离渲染树，也就是文档流】；
- 渲染树绘制，也就是我们看到的页面。
所以在做网页性能优化的时候，尽量减少对DOM的操作。因为对DOM的每次操作都会导致浏览器布局和绘制网页。
React使用虚拟Virtual DOM
然而react正好是使用Virtual DOM。react的jsx被Babel解析为创建React组件或者HTML元素的语句，并且react也没有通过这些语句来构建DOM树，而是直接构建虚拟DOM【虚拟DOM是对DOM树的抽象】。虚拟DOM不会触及到浏览器的部分，只是存在于JavaScript空间的树型结构，每一次自上而下渲染react组件时，会产生这次构建的虚拟DOM和上一次构建的虚拟DOM进行对比，在下一步骤修改真实的DOM树节点时，只更新发生改变的地方。
一个真实Element对象相当于虚拟DOM上的一个节点，具体参数：
- tagName：元素名称；
- props：元素属性【以键值对的方式存在】；
- children：该节点下的子节点数组。
Virtual DOM转化为真实的DOM树
render函数：渲染视图，将虚拟的DOM转化为真实的DOM
文章评论