前端优化之回流和重绘

一、了解浏览器的渲染机制

（1）浏览器采用流式布局

（2）首先浏览器会将html解析成DOM、将CSS解析成CSSOM，然后将DOM和CSSOM结合产生render tree

（3）浏览器根据render tree将节点绘制到页面上

总结：回流一定引起重绘，重绘不一定引起回流

二、回流和重绘

1.回流

当render tree中一些元素的尺寸或者结构发生改变时，浏览器就会重新渲染全部或部分文档，这个过程叫做回流。

会导致回流的操作：

• 页面首次渲染
• 浏览器窗口大小发生改变
• 内容变化（某个由里面内容撑开的容器，里面的内容变多或者变少了）
• 添加或者删除节点

2.重绘

当页面中元素样式的改变不影响他在文档流中的位置，浏览器会将新的样式给元素，这个过程叫重绘。

• backgroudcolor
• display：visibility（不可见但还是占据位置）

三、性能影响

能重绘就不回流

避免：

1.css：避免使用table布局、避免设置多层内联样式

2. js：

• 避免频繁操作DOM
• 对于大量插入DOM的操作，建议使用文档片段documentFragment

思考：

1.静态定位到绝对定位会引起回流吗？   （会！静态定位是默认的定位方式，也就是无定位，在文档流中占有位置，切换到绝对定位时会脱离文档流，所以会引起回流）

2.移动绝对定位的元素不会引起回流