文章目录
- 回流重绘详解
- 浏览器解析渲染机制
- 如何触发
- *回流触发*
- *重绘触发*
- 浏览器优化机制
- 如何减少
- 有需要的请私信博主，还请麻烦给个关注，博主不定期更新组件封装，或许能够有所帮助！！请关注公众号
回流重绘详解
回流： 布局引擎会根据各种样式计算每个盒子在页面上的大小与位置 重绘： 当计算好盒模型的位置 、大小及其他属性后 ， 浏览器根据每个盒子特性进行绘制
浏览器解析渲染机制
- 解析HTML ， 生成DOM树 解析CSS ， 生成CSSM树
- 将DOM树和CSSOM树结合 ， 生成渲染树(Render Tree)
- Layout(回流) 根据生成的渲染树 ， 进行回流(Layout) , 得到节点的几何信息 (位置 ， 大小)
- painting(重绘)根据渲染树以及回流得到的几何信息 ， 得到节点的绝对像素
- Display：将像素发送给GPU ， 展示在页面上
在页面初始渲染阶段 ， 回流不可避免的触发 ， 可以理解成页面 — 开始是空白的元素 ， 后面添加了新的元
素使页面布局发生改变
当我们对 DOM 的修改引发了 DOM 几何尺寸的变化 (比如修改元素的宽 、高或隐藏元素等) 时， 浏览
器需要重新计算元素的几何属性， 然后再将计算的结果绘制出来
如何触发
回流触发
- 添加或删除可见的DOM元素
- 元素的位置发生变化
- 元素的尺寸发生变化 (包括外边距 、内边框 、边框大小 、高度和宽度等)
- 内容发生变化， 比如文本变化或图片被另 一个不同尺寸的图片所替代
- 页面 — 开始渲染的时候 (这避免不了)
- 浏览器的窗口尺寸变化 (因为回流是根据视口的大小来计算元素的位置和大小的)
- 还有一些容易被忽略的操作： 获取一些特定属性的值
- offsetToP 、 offsetLeft 、 offsetwidth 、 offsetHeight 、 scrollToP
、 scrollLeft 、 scrolwidth 、 scrollHeight 、 clientToP 、 clientLeft
、 clientwidth 、 clientHeight
这些属性有一个共性 ， 就是需要通过即时计算得到 。因此浏览器为了获取这些值 ， 也会进行回流 除此还包括
getComputedStyle 方法 ，原理是-样的
重绘触发
- 颜色的修改
- 文本方向的修改
- 阴影的修改
浏览器优化机制
由于每次重排都会造成额外的计算消耗， 因此大多数浏览器都会通过队列化修改并批量执行来优化重排
过程 。浏览器会将修改操作放入到队列里 ，直到过了 -段时间或者操作达到了 一个阈值， 才清空队列
当你获取布局信息的操作的时候， 会强制队列刷新， 包括前面讲到的 offsetTop 等方法都会返回最新
的数据
因此浏览器不得不清空队列 ， 触发回流重绘来返回正确的值
如何减少
- 如果想设定元素的样式， 通过改变元素的 class 类名 (尽可能在 DOM 树的最里层)
- 避免设置多项内联样式
- 应用元素的动画 ，使用 position 属性的 fixed 值或 absolute 值(如前文示例所提
- 避免使用 table 布局 table 中每个元素的大小以及内容的改动 都会导致整个 table 的重新计算
position: fixed/absolute 从而减少对其他元素的影响 - 使用css3硬件加速 , 可以让 transform opacity filters 这些动画不会引起回流重绘
- 避免使用 Css 的 JavaScript 表达式
有需要的请私信博主，还请麻烦给个关注，博主不定期更新组件封装，或许能够有所帮助！！请关注公众号
