什么是重绘和回流以及如何避免回流

• 重绘: 当页面中元素样式的改变并不影响它在文档流中的位置时，也就是说布局没有发生改变时(比如只是改变元素的颜色)。
• 回流：当渲染树(Render Tree)中的部分（或全部）元素的尺寸、结构、显示隐藏等发生改变时，浏览器重新渲染的过程称为回流。 简而言之，任何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发回流。 回流是影响浏览器性能的关键 因素。
  比如：
  （1）添加或者删除可见的 DOM 元素(不可见元素不会触发回流)；
  （2）元素尺寸或位置发生改变
  （3）元素内容变化，比如文字数量或图片大小
  （4）浏览器窗口大小发生改变
  （5）CSS伪类的激活（例如：:hover，从而改变了元素的布局的）

注意

• 回流必定会发生重绘，重绘不一定会引发回流。
• 回流比重绘的代价要更高。有时即使仅仅回流一个单一的元素，它的父元素以及任何跟它相关的元素也会产生回流，牵一发动全身。

如何避免(减少)回流

css

• 避免设置多层内联样式。
• 如果需要设置动画效果，最好将元素脱离正常的文档流。
• 避免使用CSS表达式（例如：calc()）。

JavaScript

• 避免频繁操作样式，最好将样式列表定义为class并一次性更改class属性。
• 避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
• 可以先为元素设置为不可见：display: none，操作结束后再把它显示出来。