Contents
页面的加载和渲染全过程
- HTML的加载：输入URL后，最先拿到下载HTML文件，下载完进行解析。
- 其他静态资源加载：HTML 在解析的过程中，如果发现 HTML 文本里面夹杂的一些外部的资源链接，比如 CSS、JS 和图片等时，会立即启用别的线程下载这些静态资源。当遇到 JS 文件的时候，HTML 的解析会停下来，等 JS 文件下载结束并且执行完，HTML 的解析工作再接着来。
- DOM树构建
- CSSOM树构建
- 渲染树构建：根据DOM树CSSOM树构建渲染树
- 布局计算：渲染树构建完成以后，确定所有元素的位置关系和需要应用的样式。
- 渲染：布局计算完成以后，浏览器在页面上渲染元素。
DOM树的构建
- 将HTML里每个标签都解析成 DOM 节点（每个标签的属性、值和上下文关系等都在这个文档对象里）
- 然后使用深度遍历的方法把这些对象构造成一棵树。
- DOM 树描述的是HTML标签的层级关系
CSSOM树的构建
- 构建方式与DOM树类似
- CSSOM树描述的是选择器之间的层级关系。
渲染树的构建
渲染树是对DOM树和CSSOM树的结合，得到一个可以知道每个节点会应用什么样式的数据结构。这个结合的过程大体上是遍历整个 DOM 树，然后在 CSSOM 树里查询到匹配的样式。
渲染树的根是HTML节点
渲染树和DOM树的结构并不完全一致：渲染树里会把所有不可见的元素忽略掉，所以如果是 DOM 树中的节点有 “display: none;” 属性的节点以及它的子节点，最终都不会出现在渲染树中。但是具有 “visibility: hidden;” 样式的元素会出现在渲染树中，因为具有这个样式的元素是需要占位的，只不过不需要显示出来。
样式优先级关系：内联样式 > ID选择器 > 类选择器 > 标签选择器 > 通用选择器 > 继承样式 > 浏览器默认样式