HTML、CSS和JS如何变成页面的？( 二 ) _HTML

把CSS转换为浏览器能够理解的结构浏览器就像不能理解 HTML 一样，不理解 CSS ，所以当渲染引擎接收到 CSS 文件时，会执行转换操作，将 CSS 文本转换为浏览器可以理解的 styleSheets 结构。
在 HTML 中，在浏览器中输入 document 可以查看 html 的结构。在 css 中，可以输入 document.styleSheets 看到 css 的结构

文章插图

现在的结构是空的，我们来加一些样式，看看效果

文章插图

转换样式表中的属性值，使其标准化属性值标准化就是将所有值转换为渲染引擎容易理解的、标准化的计算值。我们大致看一下效果：

标准化前

body {font-size: 2em;color: black;font-weight: bold;...}复制代码

标准化后

body {font-size: 16px;color: rgb(0, 0, 0);font-weight: 700;...}复制代码计算出DOM树中每个节点的具体样式样式计算有两个CSS的规则：继承规则和层叠规则

CSS继承规则

CSS 继承就是每个 DOM 节点都包含有父节点的样式。我们来看一下下面这段代码中如何应用到 DOM 节点上

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>h1 {color: red;}div {color: blue;}span {font-size: 16px;}</style></head><body><h1>掘金</h1><div><span>浏览器</span><span>渲染原理</span>构建DOM树</div></body></html>复制代码

子节点会拥有父节点的样式，由此我们可以画出这样一张图

文章插图

我们还可以打开控制台，看一下选中 span 标签，都会看到哪些内容

文章插图

通过上图，我们可看到一个元素的样式、继承过程等，userAgent 样式是浏览器默认的内置样式，如果我们不提供任何样式，就会使用此样式。

样式层叠规则

层叠在 CSS 处于核心地位，它是 CSS 的一个基本特征，它定义了如何合并来自多个源的属性值的算法。
样式计算阶段最终输出的内容是每个 DOM 节点的样式，并且保存在了 ComputedStyle 中。我们可以通过控制台看到某个 DOM 元素最终的计算样式

文章插图

布局阶段现在我们不知道 DOM 元素的几何位置信息，所以现在我们需要计算出 DOM 树中可见元素的几何位置，这个计算过程就叫做布局。布局阶段有两个过程：

创建布局树
布局计算

创建布局树创建布局树的意思就是创建一棵只包含可见元素的树。我们来看下面一段代码创建布局树的过程

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>h1 {color: red;}div {color: blue;}div span {font-size: 16px;}div span:last-child {display: none;}</style></head><body><h1>掘金</h1><div><span>浏览器</span><span>渲染原理</span>构建DOM树</div></body></html>复制代码

构建布局树的过程中，DOM 树中所有不可见的节点都不会包含在这棵树中。浏览器会遍历 DOM 树中所有能看见的节点，然后把这些节点加入到布局中；不可见的节点就会被忽略，head 标签下面的内容、 div 下最后一个 span 节点都不会在布局树中，我们看一下这个过程图感受一下～