JavaScript基础之浏览器——DOM/CSS/渲染树、解析与加载、回流与重绘
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
\ 是转译字符
③ 回流和重绘仅两次
** 动画元素 一定要绝对定位