前段时间有人问我关于Reflow和Repaint的问题。这是一篇描述回流和重绘的文章。区别和优化手段加深理解。先普及一下HTMLDOM的基础知识：HTMLDOM，HTML文档对象模型（HTMLDocumentObjectModel）的简称，HTMLDOM定义了访问和操作HTML文档的标准。W3C对HTMLDOM的解释：1.HTML的标准对象模型2.HTML的标准编程接口3.W3C标准的HTMLDOM定义了所有HTML元素的对象和属性，以及访问它们的方法。换句话说，HTMLDOM是关于如何获取、修改、添加或删除HTML元素的标准。Firefox、Chrome和Safari构建在两个渲染引擎上。Firefox使用Mozilla自己开发的渲染引擎Geoko，而Safari和Chrome都使用webkit。我们参考webkit的渲染流程：解释：HTML->HTMLParser->DOMTree：解析HTML并创建DOMTree，即浏览器将HTML解析成树状的数据结构。Style->CSSParser->StyleRules：解析css并创建样式规则。其实它也是将css解析成树状的数据结构。Attachment->RenderTree->layout：将DOM节点和CSSRules连接起来形成RenderTree，然后根据rendertree进行布局，计算每个节点的几何结构，这里发生的就是Reflow。painting->Display：绘制，根据计算出的规则绘制样式，显示内容。Reflow：当一个DOM节点的layout属性发生变化时，会重新计算该属性，浏览器会重绘相应的元素。这个过程称为回流（Reflow）或重排。Repaint：当一个影响DOM元素可见性的属性发生变化时（比如颜色），浏览器会重绘相应的元素。这个过程称为重绘（Repaint）。所以重排必然会引起重绘。浏览器在处理重排时，会递归处理DOM节点，所以重排的代价比重绘要高。我们只需要避免重排。引起重排的操作：1.调整窗口大小2.字体大小3.样式表变化4.元素内容变化，尤其是输入控件5.CSS伪类激活（:hover,:active等），发生在用户交互过程中6.DOM操作，DOM元素的增删改查7.width，clientWidth，scrollTop等布局宽高的计算是这样的，我们只需要避免两个操作就可以达到性能优化：1.避免大DOM操作数2.避免DOM布局属性过多的计算细分：1.不要直接读取style属性逐项修改保存。样式修改要密集，比如直接修改className。2、创建一个div，设置display:none，然后应用它所有的DOM操作，最后添加到html文档中，修改显示，显示。3.避免频繁读取元素几何属性（如scrollTop）。4.具有复杂动画的元素的绝对定位。绝对定位使其脱离文档流，避免造成父元素和后续元素的大量回流。当我了解更多时，我会稍后添加它。
