浏览器接收到 HTML 文件并转换为 DOM 树
当我们打开一个网页时,浏览器都会去请求对应的
HTML
文件。虽然平时我们写代码时都会分为JS
、CSS
、HTML
文件,也就是字符串,但是计算机硬件是不理解这些字符串的,所以在网络中传输的内容其实都是0
和1
这些字节数据。当浏览器接收到这些字节数据以后,它会将这些字节数据转换为字符串,也就是我们写的代码。
当数据转换为字符串以后,浏览器会先将这些字符串通过词法分析转换为标记(
token
),这一过程在词法分析中叫做标记化(tokenization
)
那么什么是标记呢?这其实属于编译原理这一块的内容了。简单来说,标记还是字符串,是构成代码的最小单位。这一过程会将代码分拆成一块块,并给这些内容打上标记,便于理解这些最小单位的代码是什么意思
当结束标记化后,这些标记会紧接着转换为 Node,最后这些
Node
会根据不同Node
之前的联系构建为一颗DOM
树
以上就是浏览器从网络中接收到
HTML
文件然后一系列的转换过程
当然,在解析 HTML 文件的时候,浏览器还会遇到
CSS
和JS
文件,这时候浏览器也会去下载并解析这些文件,接下来就让我们先来学习浏览器如何解析CSS
文件
将 CSS 文件转换为 CSSOM 树
其实转换
CSS
到CSSOM
树的过程和上一小节的过程是极其类似的
- 在这一过程中,浏览器会确定下每一个节点的样式到底是什么,并且这一过程其实是很消耗资源的。因为样式你可以自行设置给某个节点,也可以通过继承获得。在这一过程中,浏览器得递归
CSSOM
树,然后确定具体的元素到底是什么样式。
如果你有点不理解为什么会消耗资源的话,我这里举个例子
<div>
<a> <span></span> </a>
</div>
<style>
span {
color: red;
}
div > a > span {
color: red;
}
</style>
对于第一种设置样式的方式来说,浏览器只需要找到页面中所有的
span
标签然后设置颜色,但是对于第二种设置样式的方式来说,浏览器首先需要找到所有的span
标签,然后找到span
标签上的a
标签,最后再去找到div
标签,然后给符合这种条件的span
标签设置颜色,这样的递归过程就很复杂。所以我们应该尽可能的避免写过于具体的CSS
选择器,然后对于HTML
来说也尽量少的添加无意义标签,保证层级扁平
生成渲染树
当我们生成
DOM
树和CSSOM
树以后,就需要将这两棵树组合为渲染树
- 在这一过程中,不是简单的将两者合并就行了。渲染树只会包括需要显示的节点和这些节点的样式信息,如果某个节点是
display: none
的,那么就不会在渲染树中显示。 - 当浏览器生成渲染树以后,就会根据渲染树来进行布局(也可以叫做回流),然后调用
GPU
绘制,合成图层,显示在屏幕上。对于这一部分的内容因为过于底层,还涉及到了硬件相关的知识,这里就不再继续展开内容了。