关于重绘repaint和重排reflow

一、什么是重绘，重排

渲染树转换为网页布局，称为"布局流"(flow) ，布局显示到页面的这个过程，称为“绘制”(paint) 。

它们都具有阻塞效应，并且会耗费很多时间和计算资源。

页面生成以后，脚本操作和样式表操作，都会触发“重流”(reflow) 和“重绘”(repaint) 。

用户的互动也会触发重流和重绘，比如设置了鼠标悬停(a:hover)效果、页面滚动、在输入框中输入文本、改变窗口大小等等。

重流和重绘并不一定一起发生，重流必然导致重绘，重绘不一定需要重流。比如改变元素颜色，
只会导致重绘，而不会导致重流;改变元素的布局，则会导致重绘和重流。

---

二、重绘和重流的体现:

repaint是某个DOM元素进行重绘;

reflow是 整个页面进行重排，也就是页面所有DOM元素渲染。

---

三、如何触发:

style变动造成repaint和reflow。

不涉及任何DOM元素的排版问题的变动为repaint,例如元素的color/ext-align/text-decoration等等属性的变动。
除上面所提到的DOM元素style的修改基本为reflow。例如元素的任何涉及长、宽、行高、边框、display等 style的修改。

---

四、常见触发场景:

1.触发repaint:

1. color的修改，如color= #ddd;
2. text-align的修改，如text-align=center;
3. a:hover也会造成重绘。
4. :hover弓|起的颜色等不导致页面回流的style变动。

2.触发reflow:

1. width/height/border/margin/padding的修改，如width=778px; .

2.动画，:hover等伪类引起的元素表现改动，display=none等 造成页面回流; .

3 annendChild等DOM元素操作:

4. font类style的修改;

5. background的修改，注意着字面上可能以为是重绘，但是浏览器确实回流了，经过浏览器厂家的优化，部分background的修改只触发repaint,当然IE不用考 虑;

6. scroll页面，这个不可避免;

7. resize页面，桌面版本的进行浏览器大小的缩放，移动端的话，还没玩过能拖动程序, resize程序窗口大小的多窗口操作系统。

8.读取元素的某些属性(offsetLeft、offsetTop、offsetHeight、offsetWidth.
scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()