浏览器的渲染过程

时间:2021-10-29 来源:未知网络 作者:996建站网

通常,我们只需要编写HTML,CSS,JavaScript,浏览器上就能呈现出漂亮的网页了,但是浏览器是如何使用我们的代码在屏幕上渲染像素的呢?

首先,请先看一张大图

浏览器将HTML,CSS,JavaScript代码转换成屏幕上所能呈现的实际像素,这期间所经历的一系列步骤,叫做关键渲染路径(Critical Rendering Path)。其中包含:

  • 构建对象模型(DOM,CSSOM)
  • 构建渲染树(RenderTree)
  • 布局
  • 渲染

在构建对象模型到构建渲染树的这一过程,还穿插着JS脚本的加载和执行。如下图所示:

浏览器的渲染过程插图

1.DOMTree的构建

浏览器的渲染从解析HTML文档开始,宏观上,可以分为下面几个步骤:

浏览器的渲染过程插图

  • 第一步(解析):从网络或者磁盘下读取的HTML原始字节码,通过设置的charset编码,转换成相字符

浏览器的渲染过程插图

  • 第二步(token化):通过词法分析器,将字符串解析成Token,Token中会标注出当前的Token是开始标签,还是结束标签,或者文本标签等。

浏览器的渲染过程插图

  • 第三步(生成Nodes并构建DOM树):浏览器会根据Tokens里记录的开始标签结束标签,将Tokens之间相互串联起来(带有结束标签的Token不会生成Node)
    Node包含了这个节点的所有属性。例如<img src="xxx.png" >标签最终生成出的节点对象中会保存图片地址等信息。
    事实上,在构建DOM树时,不是要等所有的Tokens都转换成Nodes后才开始,而是一边生成Token一边采取深度遍历算法消耗Token来生成Node,如下图所示:
    图中有颜色的小数字代表构建的具体步骤,可以看出,首先生成出html Token,并消耗Token创建出html 节点对象,接着生成head Token并消耗Token创建出head节点对象……,当所有的Tokens都消耗完了,紧接着DOM树也就构建完了。

浏览器的渲染过程插图

这里抛出个小问题,为什么有时在js中访问DOM时浏览器会报错呢?
因为在上述的解析的过程中,如果碰到了script或者link标签,就会根据src对应的地址去加载资源,在script标签没有设置async/defer属性时,这个加载过程是下载并执行完全部的代码,此时,DOM树还没有完全创建完毕,这个时候如果js企图访问script标签后面的DOM元素,浏览器就会抛出找不到该DOM元素的错误。
值得注意的是:从bytes到Tokens的这个过程,浏览器都可以交给其他单独的线程去处理,不会堵塞浏览器的渲染线程。但是后面的部分就都在渲染线程下进行了,也就是我们常说的js单线程环境。

2.CSSOMTree的构建

DOM会记录页面的内容,但是浏览器还需要知道这些内容该用什么样式去展示,所以还需要构建CSSOMTree。CSSOM的生成过程和DOM的生成过程十分相似,也是:1.解析,2.Token化,3.生成Nodes并构建CSSOMTree:

假设浏览器收到了下面这样一段css:

body {font-size: 16px;}
p {font-weight: bold;}
p span {display:none;}
span {color: red;}
img {float: right;}

浏览器的渲染过程插图1

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序