回流和重绘

回流和重绘：

• 访问页面的时候浏览器会解析HTML代码并构建dom树，同时css样式也会被解析创建css对象模型树，dom树和css模型树合成渲染树，（当渲染树中的一部分或者全部因为大小边距等问题发生改变而需要重建的过程叫做回流）渲染树和dom树的区别就是当给一个节点设置了display：none的时候，渲染树上面是没有这个节点的，浏览器会根据渲染树进行布局，布局出来的是一个盒模型，它可以精确的捕获到每个节点在视图内的位置和尺寸，这一行为通常被称为回流或者自动重排
• （当元素的一部分属性发生变化，如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘）布局完成后浏览器会立即发出paint setup事件，这个过程被称为绘制，此时页面会被显示在浏览器上
• 当用户在操作浏览器的时候会经常操作重新合成渲染树和paint setup事件，此时就是回流和重绘事件
• 回流(reflow) 引起Dom树结构变化，改变页面布局
• 重绘(repaint) 不会引起Dom树变化及页面布局变化，只重新渲染页面样式，回流与重绘两者之间的联系在于: 触发回流一定会触发重绘, 而触发重绘却不一定会触发回流。
• 一般节点的布局改变或者宽高的改变，元素字体大小变化，增加或者移除样式表，页面首次渲染，浏览器窗口大小的改变都会触发回流和重绘
• 元素的颜色或者background、透明度、transform改变时只会触发重绘
• 如何避免回流和重绘：1.避免使用table布局 2.避免设置多层内联样式 3.尽可能在DOM树的最末端改变CLASS 3.避免使用css表达式