回流（重排）和重绘画

是什么？
浏览器解析的DOM树和CSSOM树，接着对DOM树进行遍历，拿到DOM节点，然后再从CSSDOM树中拿到相应节点的样式，最后生成渲染树。

回流：渲染树生成之后，每个节点元素的具体位置、大小的计算，然后渲染在浏览器，这个过程就叫回流
重绘：每个节点元素的像素点渲染在浏览器的过程就叫重绘（如背景色）

什么情况下会造成回流和重绘？

①：修改DOM元素的位置、大小，浏览器要重新遍历计算DOM元素，会造成回流（重排）
②：修改DOM元素的背景色、字体颜色等操作会引起重绘

PS : 重绘不一定会引起回流，但回流一定会引起重绘

如何优化？

1、浏览器：因为每次的回流和重绘会造成浏览器开销巨大，浏览器层面上就做了一些优化措施，它不会每次都把涉及回流、重绘的操作执行一次，而是把这些操作放入一个列队里，在列队排满后或者一段时间后一次执行，大大减少了浏览器开销，但是如果在代码执行的过程中，有JS请求APIA获取元素的位置时，列队会被强制刷新，如下API：offsetLeft、offsetTop、offsetWidth, offsetHeight, clientWidth, clientHeigth，clientLeft，clientTop，scrollWidth, scrollHeight, scrollLeft, scrollTop等。

2、尽量减少重绘、回流操作：如使用visible、opcity代替display
3、脱离文档流：如遇到复杂动画的时候，可以把动画所在的盒子绝对定位，让其脱离父级文档流，不影响父级和后面元素
4、css3硬件加速：使用transform、opcity、filter(图片黑白)触发硬件加速