JavaScript基础之浏览器——DOM/CSS/渲染树、解析与加载、回流与重绘

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

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

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

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

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

3. cssTree

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

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

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

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

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

5. 回流与重绘

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

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

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

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

引起回流的因素：

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

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

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

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

① 通过添加类

② 通过cssText
添加的是内联样式哦，∵ dom不能直接操作css
\ 是转译字符

③ 回流和重绘仅两次

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