浏览器渲染页面的原理及流程

时间:2021-08-22 18:31:25

一、构建DOM树及CSSOM树

1.1构建DOM树

HTML 文档中的所有内容都是节点,各节点之间拥有层级关系,如父子关系、兄弟关系等,彼此相连,构成DOM树。最常见的几种节点有:文档节点、元素节点、文本节点、属性节点、注释节点

DOM节点树中节点与html文档中标签一一对应,DOM树构建过程:读取html文档,将字节转换成字符,确定tokens,再将tokens转换成节点,以节点构建 DOM 树。如下图所示:

           浏览器渲染页面的原理及流程             浏览器渲染页面的原理及流程

 1.2构建CSSOM树