介绍下重绘和回流（Repaint & Reflow），以及如何进行优化

[Rashomon511]

当元素的样式发生变化时，浏览器需要触发更新，重新绘制元素。这个过程中，有两种类型的操作，即重绘与回流。
重绘(repaint): 当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要UI层面的重新像素绘制，因此 损耗较少

回流(reflow): 当元素的尺寸、结构或触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作。会触发回流的操作:

• 页面初次渲染
• 浏览器窗口大小改变
• 元素尺寸、位置、内容发生改变
• 元素字体大小变化
• 添加或者删除可见的 dom 元素
• 激活 CSS 伪类（例如：:hover）
• 查询某些属性或调用某些方法
  • clientWidth、clientHeight、clientTop、clientLeft
• offsetWidth、offsetHeight、offsetTop、offsetLeft
• scrollWidth、scrollHeight、scrollTop、scrollLeft
• getComputedStyle()
• getBoundingClientRect()
• scrollTo()

回流必定触发重绘，重绘不一定触发回流。重绘的开销较小，回流的代价较高。

实践:

css

• 避免使用table布局
• 将动画效果应用到position属性为absolute或fixed的元素上

javascript

• 避免频繁操作样式，可汇总后统一 一次修改
• 尽量使用class进行样式修改
• 减少dom的增删次数，可使用 字符串 或者 documentFragment 一次性插入
• 极限优化时，修改样式可将其display: none后修改
• 避免多次触发上面提到的那些会触发回流的方法，可以的话尽量用 变量存住

扩展： style标签写在body后与body前有什么区别
写在head标签中利于浏览器逐步渲染（resources downloading->CSSOM+DOM->RenderTree(composite)->Layout->paint）
写在body标签后由于浏览器以逐行方式对html文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）