重绘（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
举个