一、回流(reflow)

• 回流又称重排

1.定义：

• 当浏览器必须重新处理和绘制部分或全部页面时，回流就会发生，简单来说就是当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树

2.何时会触发回流

• 页面渲染初始化，无法避免的
• 添加或者删除可见的 DOM 元素；
• 元素的位置发生变化，元素尺寸改变（边距、填充、边框、宽度和高度），元素使用动画；
• 内容变化。例如文本变化（用户在input中输入文字）、图片被不同尺寸的图片所替代；
• 激活CSS伪类，例如hover；
• 浏览器窗口尺寸改变。例如resize事件发生时；
• 获取一些特定属性的值。offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeigh。这些属性有一个共性，就是需要通过即时计算得到。因此浏览器为了获取这些值，也会进行回流；
• 当我们修改网页的默认字体时。

二、重绘(repaint)

1.定义

• 在渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，像素，背景色不影响布局，就称为重绘。

2.何时会触发重绘

• 背景色发生改变
• 样式发生改变时

三、回流和重绘的区别

• 回流一定会发生重绘，重绘不一定会引发回流。
• 回流会导致页面重排，影响性能

四、如何减少回流和重绘？

• 减少一条一条的修改DOM的样式，可以直接修改DOM的className
• 减少把DOM结点的属性值放在一个循环里当成循环里的变量
• 使用缓存：尽量减少重复计算，可以将计算结果缓存起来，避免重复计算。
• 给动画的HTML元件使用fixed或absolute的position，那么修改他们的css是不会重排
• 避免在大量元素上使用:hover
• 分离读写操作
• 避免使用Table布局
• 减小DOM的深度：避免过深的DOM嵌套结构，可以提高渲染速度
• 避免在布局信息改变时查询布局信息
• 当需要对DOM元素进行一系列的操作时，可以先使元素脱离文档流，再对其进行一系列操作，然后再把元素带回文档中