DOM树的回流过程

DOM 模型

1、DOM 标准

DOM (Document Object Model) 的全称是文档对象模型，它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。比如，Web开发中，用 JavaScript 语言来访问、创建、删除或者修改 HTML 的文档结构。

目前 W3C 已经定义了一系列 DOM 接口（三个版本的 DOM 接口，每一个版本都加入了一些新功能，有兴趣的同学请自行查阅），使用这些接口可以对 DOM 树结构进行操作。

2、 DOM 树

1.浏览器把获取到的HTML代码解析成1个DOM树，HTML中的每个标签都是DOM树中的1个节点，根节点就是常用的document对象。DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等
2. 浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式
. 以css3里面的transform为例子
transform: ;(谷歌),-moz-tranform (火狐)，-ms- transform (ie) ,-o- -transform(opera)

. 3、DOM 样式树会生成render树，render树类似于 dom树,他们的区别很大,render tree能识别样式,render tree中每个NDDE都有自己的style，而且render tree不包含隐藏的节点,这些节点不会呈现。

4.一旦render tree构建完毕后，浏览器就可以根据render tree来绘制页面了，当render tree里面元素如尺寸，布局，隐藏这些需要重新构建称为回流在当render tree元素更新好哦，不影响布局的状态叫重绘；

注意：每个页面需要回流一次，在回流的时候，浏览器会使渲染树中受到影响到部分失效效，并重新构造这部分渲染树，回流之后，重新绘制受影响的部分回到屏幕中，当添加或者是删除可见的DOM元素，和元素尺寸改变，元素位置改变，内容改变，浏览器窗口尺寸改变，发生这些会是浏览器回流，所以对此方面性能优化的根本就是减少CSS回流