什么是回流和重绘？说一下你对回流和重绘的理解，如何优化？

通常来说，浏览器一般有两部分组成：一个是js引擎，用来解析js代码；一个是渲染引擎，用来渲染页面。

渲染引擎解析HTML生成DOM树，解析CSS生成CSSOM(CSS对象模型-CSS Object Model-简写形式)；

然后将DOM树和CSSOM结合生成渲染树（render tree），最后浏览器根据渲染树来渲染整个页面。

回流：当渲染树的一部分或者全部元素因为尺寸大小、布局、显示或隐藏等发生改变，需要重新构建页面的过程叫做回流。

重绘：当渲染树的一部分元素的尺寸大小、布局、显示或隐藏等没有改变，而是改变了元素的外观风格，不影响其他元素的时候，比如修改字体颜色，修改背景颜色等过程叫做重绘。

结论：回流一定会触发重绘，重绘不一定会回流；回流会导致渲染树需要重新计算，开销比重绘大，所以我们要尽量避免回流的产生。

如何避免，回流和重绘的优化：

（1）不使用能够触发回流的属性。

（2）建立一个图层，让回流在图层里面进行，限制回流和重绘的范围，减少浏览器的运算工作量。

（3）尽量不要使用table布局，因为一个小小的改动可能会使整个table进行重新布局。

（4）不要频繁操作元素的样式，对于静态页面，可以修改类名，而不是样式。

（5）使用transform代替top，left，margin-left等属性

（6）将DOM的多个读写操作放在一起，而不是读写操作穿插着写。

。。。。。。等等。

如何优化动画？

对于如何优化动画，我们知道，一般情况下。动画需要频繁的操作DOM，就会导致页面的性能问题，我们可以将动画的position属性设置为absolute或fixed，将动画脱离文档流，这样它的回流就不会影响页面了。