解析流程

  1. 解析 html，构建 DOM Tree
  2. 解析 CSS，构建 CSS Rule Tree
  3. 由 DOM Tree 和 CSS Rule Tree 生成 Render Tree
  4. 利用 Render Tree 进行布局 Layout，浏览器已经能知道网页中有哪些节点、各个节点的 CSS 定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置
  5. painting 绘制 按照算出来的规则将内容绘制到屏幕上

相关问题

问：DOM 树的构建是文档加载完成开始的？
答：不是，为更好用户体验，渲染引擎会尽快将内容进行显示，加载部分后就尝试解析、构建、布局、渲染。
问：Render 树是 DOM 树和 CSSOM 树构建完毕才开始构建的吗？
答：不是。三者交叉进行，一边加载，一边解析，一边渲染。
问：CSS 解析顺序？
答：选择器从右往左，DOM 树从下向上的解析顺序。嵌套标签越多解析越慢。
问：repaint 重绘？
答：改变元素背景色、前景色、边框色等，不影响文档中周边元素布局位置。
问：reflow 回流？
答：影响元素布局位置变更的操作，会导致回流，从根向下重新计算全部元素节点尺寸和位置，比如：元素显隐、元素尺寸变更、定位方式等，都会引起内部、周围、整个页面的重新渲染。通常无法预估页面哪部分会回流，它们都彼此相互影响着。频繁回流会影响性能。