DOM树生成流程 #5
Description
前言
DOM 由 HTML 标签文本先进行分词然后利用栈的后进先出特点来生成一个 DOM 树
DOM 接口
介绍 DOM 树生成之前先介绍一下 DOM 接口相关的信息，不同的 DOM 节点对应不同的 DOM 接口，如 head 与 body 节点接口继承关系
- head: Object<-EventTarget<-Node->Element<-HTMLElement<-HTMLHeadElement
- body: Object<-EventTarget<-Node<-Element<-HTMLElement<-HTMLBodyElement
DOM 元素的组成
DOM 元素由标签和文本构成，而标签又分为 tagStart、tagEnd 。
DOM 树生成过程
<html>
<head>
<title>DOM解析</title>
</head>
</html>- 创建一个空栈，并向该栈 push 一个 tagStart 为 document 的标签，同时生成一个 document 节点
- 渲染引擎根据网络进程拿到的字节流进行分词解析
- 遇到
<html>时会根据 HTMLHtmlElement 对象实例化一个 html 节点并作为 document 节点的子节点，同时把htmlpush 到栈中 - 遇到
<head>时会根据 HTMLHeadElement 对象实例化一个 head 节点并作为 html 节点的子节点，同时把headpush 到栈中 - 遇到
title时会根据 HTMLTitleElement 对象实例化一个 title 节点并作为 title 节点的子节点，同时把titlepush 到栈中 - 继续进行分词解析时遇到
DOM解析文本时使用 Text 对象实例化一个 文本节点并作为 title 节点的子节点，并不会 push 到栈中 - 遇到
</title>时因为该标签为 tagEnd 所以会在栈中 pop 出一个元素 判断是否为 title TagStart，如果是则该节点生成完成
DOM 树生成阻塞
在对字节流进行解析时如果遇到 script 标签，此时HTML解析器会暂停解析， javascript引擎会先执行 script 脚本再继续进行解析，因为 javascript 可能会对 DOM 进行添加、修改等操作。如果该 script 标签前面还有style标签，会先对 style 标签的文本解析时 CSSOM，因为 js 也可能会对 CSSOM 进行操作，常见的比如获取某个元素样式信息。如果 js 与 css 需要下载时，也会延长 DOM 的解析。不过渲染进程中有预解析线程会先扫描一下html文本中是否有需要加载的关键资源，有的花就会去下载，下载的过程中并不会阻塞DOM解析