重绘和回流

一，重绘和回流是什么？有什么区别

1.重绘
重绘（repaint）：当页面中的样式的改变，但不涉及到元素位置变化（列如：color，background-color，visibility），浏览器回将新样式赋予给元素并重新绘制它，这个过程称之为重绘。
重绘倾向于样式的调整，对性能影响比较小
2. 回流
回流（reflow 通常称为：重排）：当渲染 树中部分或全部元素的尺寸,结构，或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。
回流倾向于结构调整，对性能影响较大

二，何时会引起重绘？

1.元素的颜色，透明度，及背景色等发生改变时
2.text-align等发生改变时
总之来说：只要没有影响到元素在文档流中的位置，仅仅时一些颜色和透明度上面的改变，就会引起重绘，不会引起回流

三，何时会引起回流？

1，首次渲染页面
2，添加删除元素
3，改变元素大小（内外边距，边框 ，宽高）
4，改变元素位置
5，改变元素内容
6，改变字体大小（都可能会使位置发生变化，触发回流）
7，调整浏览器窗口大小（可能会影响元素的相对位置变化，所以会触发回流）
8，查询某些属性或者调用某些方法（clientwidth，getComputedStyle（））
总之来说：元素的位置或者尺寸大小，内容及浏览器的宽高，窗口变化，都会引起回流

四，重绘和回流的联系

回流一定会触发重绘，而重绘不一定会回流

五，浏览器的优化机制

1、由于每次回流都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，知道过了一段事件或者操作达到了一个阈值，才会清空队列：
2、当访问以下属性或方法时，浏览器会立刻清空队列，执行回流和重绘返回正确的值
OffsetTop，offsetLeft，offsetWidth，offsetHeight，
ScrollTop，scrollLeft，scrollWidth，scrollHeight，
clientTop，clientLeft，clientWidth，clientHeight，
GetComputedStyle（），

六，如何避免回流