前端性能优化之理解JavaScript的重排和重绘

一. 什么是重排，重绘 ？

重排： 重新渲染DOM树。
当渲染树中元素的布局，隐藏等发生改变时, 会发生重绘即回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。

重绘：元素外观发生改变。
当盒子的颜色、字体大小等发生改变时浏览器会重新绘制该元素，将内容呈现在页面上。(改变元素外观属性。如：color，background-color等会触发重排)

• 重排必定会引发重绘，但重绘不一定会引发重排
• 重排重绘都比较影响性能，但是重排相对来说更费性能

---

二. 什么时候发生重排，重绘？

1. 重排：元素布局发生改变，如：
   （1）display：none；
   （2）节点的创建与删除
   （3）边距，边框，宽高发生改变
   （4）获取窗口的属性以及改变
2. 重绘：元素外观发生改变
   （1）背景颜色发生改变
   （2）字体大小发生改变

---

三. 怎么减少重排，重绘 ？

1. 若要发生多次重排，使该元素脱离文档流之后在进行操作，这样就只会发生两次重排。
2. 把经常用的浏览器的值获取一次之后就缓存到变量中。
3. 分离读写操作。