回流reflow

浏览器渲染过程

1. 解析HTML生成DOM树。
2. 解析CSS生成CSSOM规则树。
3. 将DOM树与CSSOM规则树合并在一起生成渲染树。
4. 遍历渲染树开始布局，计算每个节点的位置大小信息。
5. 将渲染树每个节点绘制到屏幕。

当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行，然后继续构建DOM

reflow(回流）

• 为了重新渲染部分或全部的文档而重新计算文档中元素的位置和几何结构的过程
• 元素的尺寸或位置发生了改变，导致需要重新计算并验证渲染树
• 一个元素的回流导致了其所有子元素以及DOM中紧随其后的祖先元素的随后的回流。

与repaint区别

• display:none 会触发reflow
• visibility: hidden 语义隐藏元素，仍然占置着布局空间，只会触发repaint
• 提醒
  • 在某些情况下，修改元素的样式，浏览器并不会立即reflow或repaint
  • 会缓冲在某一时间点，做一次增量异步reflow

避免回流或将其对性能的影响降到最低

• 尽可能在DOM树的最末端改变class
• 避免设置多层内联样式
• 动画效果应用到position属性为absolute或fixed的元素上
• 牺牲平滑度换取速度
• 避免使用table布局
• 避免使用CSS的JavaScript表达式