浏览器的渲染流程

解析文档构建 DOM 树 和 CSS 树

浏览器的解析内容分为三个部分

• HTML/XHTML/SVG：解析这三种文件后，会生成 DOM 树（DOM Tree）
• CSS：解析样式表，会生成 CSS 规则树（CSS Rule Tree）
• JavaScript：解析脚本，通过 DOM API 和 CSSOM API 操作 DOM Tree 和 CSS Tree，与用户交互

构建渲染树

• 解析文档后，浏览器引擎会将 CSS Rule Tree 附着到 DOM Tree 上，并根据 DOM Tree 和 CSS Rule Tree 构造 Rendering Tree
• 注意：Render Tree 和 DOM Tree 的区别在于，类似 display:none; 的东西不会放在渲染树上
• 将 CSS Rule Tree 匹配到 DOM Tree 需要解析 CSS 的选择器，为了提高性能，DOM Tree 应当尽量小，CSS Selector 应该尽量使用 id 和 class 避免过度重叠

布局与绘制渲染树

• 解析 position overflow z-index 等等属性，计算每一个渲染树节点的位置和大小，此过程被称为 reflow
• 调用操作 Native API 进行绘制