解析文档构建 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 进行绘制
网友评论