DOM/CSS/渲染树、解析与加载、回流与重绘

1. domTree (深度优先解析原则)

2. 先有解析，再有加载。

解析不受加载速度限制，解析完毕并不说明页面加载完毕

样式跟domTree的节点解析是没有关系的 （你动态创建的节点、display:none的节点 依旧会被解析哦）

3. cssTree

“ 不会与dom结合，但是回去查看 ”

自动忽略浏览器不能识别、不用的样式

4. renderTree(渲染树) = domTree + cssTree

渲染树每个节点都有自己的样式渲染树不包含 display:none head 之类不需要绘制的节点visibility：hidden 会绘制，影响到布局的它全部都会绘制）渲染树上的每一个节点都会被当做一个盒子，具有内容填充 边距 边框 位置 大小 其他样式

构建完毕后，浏览器会根据它绘制页面

5. 回流与重绘

当JS对页面的节点操作时，就会产生回流或者重绘

回流一定会引起重绘，重绘不一定是回流产生的

回流(reflow)： 因为节点的尺寸、布局、display:none block 这些改变的时候，渲染树中的一部分或者全部需要重新构建，这时就产生回流。一个页面至少有一次回流（就算你没有js)

重绘(repaint)： 回流时，浏览器会看重新构建受影响部分的渲染树， 回流完成后，浏览器会根据新的渲染树重新绘制回流影响的部分节点，这个重新绘制的过程 就是重绘

引起回流的因素：

DOM节点增加、删除DOM节点位置变化元素的尺寸、边距、填充、边框、宽高DOM节点 display显示与否页面渲染初始化浏览器窗口尺寸变化 -> resize向浏览器请求某些样式信息 offset、scroll、client、width、height、getComputedStyle( )、currentStyle

剩余的操作就是重绘（e.g. 修改背景颜色…)

做DOM操作最消耗性能，原因就是出在回流 所以，在进行DOM优化时都是以避免、减少回流为依据

所以不建议样式一行行的写， （浏览器有优化的队列，但是没代码优化来的好）

① 通过添加类

② 通过cssText 添加的是内联样式哦，∵ dom不能直接操作css \ 是转译字符 ③ 回流和重绘仅两次

** 动画元素 一定要绝对定位