重绘（Repaint）和回流（Reflow）

重绘（Repaint）和回流（Reflow）

1、回流和重绘只是渲染步骤的一小节，是怎么做到影响性能的？

　　css 会影响 javascrip 执行时间导致 javascript 脚本变慢

浏览器渲染一个网页的时候会启用两条线程：
一条渲染javascript 脚本，另一条渲染 ui 即css 样式的渲染。

但这两条线程是互斥的。当javascript 线程运行的时候 ui 线程则会中止暂停，反之亦然。

那这是为什么呢？

原因是，当ui 线程运行对页面进行渲染的时候 js 脚本难免会涉及到页面视图上的一些样式的改变，
为了使这个改变更加准确 js 脚本只好等待ui 线程渲染完成的时候才去执行。

所以当一个页面的元素样式改动频繁的时候ui 线程就会持续渲染，造成js 代码反应慢半拍，卡顿的情况。

---

2、什么是回流？什么是重绘？

　　a、回流：布局或者几何属性需要改变就称为回流。

　　　           当render tree 的一部分或全部的元素因改变了自身的宽高，布局，显示或隐藏，

　　              或者元素内部的文字结构发生变化 导致需要重新构建页面的时候，回流就产生了

　　b、重绘：重绘是当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘。

　　　　        当一个元素自身的宽高，布局，及显示或隐藏没有改变，而只是改变了元素的外观风格的时候，就会产生重绘。

例如你改变了元素的background-color

　　c、因此，回流必定会发生重绘，重绘不一定会引发回流。

回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流。

　　　  所以以下几个动作可能会导致性能问题：　　　　　

1>改变 window 大小

2>改变字体

3>添加或删除样式

　　　　　  4>文字改变

　　　　　  5>定位或者浮动

　　　　     6>盒模型

　　

---

3、什么会引起回流？

　  大概分为五类：

　　　　a、首当其冲自然是dom树结构变化，比如你删除或者添加某个node.

　　　　b、元素几何属性变化，包括margin,padding,height,width,border等

　　　　c、页面渲染初始化

　　　　d、获取某些属性(offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE))

　　　　e、浏览器窗口发生变化-resize事件发生时

var s = document.body.style;
s.padding = "2px"; // 回流+重绘
s.border = "1px solid red"; // 再一次 回流+重绘
s.color = "blue"; // 再一次重绘
s.backgroundColor = "#ccc"; // 再一次 重绘
s.fontSize = "14px"; // 再一次 回流+重绘
// 添加node，再一次 回流+重绘
document.body.appendChild(document.createTextNode('abc!'));

---

4、什么会引起重绘？

---

5、如何避免？

　　a、使用 translate 替代 top

　　　 举个