前端性能：浏览器的重绘和回流

浏览器的重绘和回流

浏览器渲染机制

• 浏览器采用流式布局模型
• 浏览器将HTML解析成DOM树，CSS解析成CSSOM树，将DOM和CSSOM合并成Render树。
• 有了RenderTree，就需要计算他们在页面上的大小和位置，最后绘制到页面上。
• 由于浏览器使用流式布局，对Render Tree只需要计算一次布局，但是table元素及其内部元素需要进行多次计算，通常要花3倍同等元素的时间，因此要避免使用table。

重绘

• 由于结点的几何属性改变或者样式改变而不会影响布局的称为“重绘”。
• 例如：visibility,color,background-color,outline
• 重绘代价很高，因为浏览器需要验证DOM树上的节点可见性。

回流

• 当布局或者某些几何属性需要改变时，就会触发回流。

• 回流涉及到部分页面或者整个网页的布局更新，因此对浏览器性能影响很大。

• 一个DOM可能会导致其所有子元素、紧随其后的节点、祖先节点元素的随后回流：

  <div class