页面的重绘与回流，以及如何优化

这里是修真院前端小课堂，本篇分析的主题是

【页面的重绘与回流，以及如何优化】

浏览器对页面的呈现流程

 

页面呈现流程

• 浏览器把取到的HTML代码解析成1个DOM树
  • HTML中的每个tag都是DOM中的1个节点
  • 根节点是document对象
  • DOM树里包含了所有HTML标签
  • 包括display:none;隐藏（因为DOM tree无法识别样式），还有用JS动态添加的元素等
• 浏览器把所有样式解析成样式结构体，解析过程中会去掉浏览器不能识别的样式(例如：IE会去掉-moz开头的样式)
• DOM tree和样式结构体组合构建render tree
  • render tree类似于DOM tree
  • render tree能识别样式，render tree中的每个节点都有自己的style
  • render tree不包含隐藏的节点（例如：display:none;的节点和head节点）
  • 页面加载时，不会呈现且不会影响呈现的节点不会包含到render tree中
  • visibility:hidden;会影响布局(layout)，会占有空间
  • 浏览器根据构建好的render tree来绘制页面

回流与重绘

1、概述

• 当render tree中的一部分(或全部)，因为元素的规模尺寸、