JavaScript怎么吧DOM树生成的?

104 阅读1分钟

DOM树是由浏览器解析成HTML文档时生成的。浏览器会根据HTML文档中的标签,属性、文本等信息。将其转换为一颗树形结构,这颗树就是DOM树。

JS生成树的流程:

1.浏览器读取HTML文档,并将其转换为一个字符流。

2.浏览器解析字符流,将其转换为一个标记流,即将HTML文档中的标签、属性、文本等信息解析出来。

3.浏览器根据标记流构建DOM树,即将HTML文档中标签、属性、文本等信息转换为DOM节点,并按照其在HTML文档中的层次关系构建成一棵树形结构。

4.浏览器将DOM树和CSS样式表结合起来,生成渲染树,即将DOM节点和CSS样式表中的样式信息结合起来,生成一个可视化页面。

5.浏览器将渲染树进行布局和绘制,最终呈现出页面的效果。

js是单线程,"浏览器是多进程架构,而其中有一个渲染进程,负责页面的渲染和js脚本的执行,而在渲染进程中有一个HTML解析器,oh对还有一个网络进程,网络进程负责根据content-type创建渲染进程,然后渲染进程用类似stream流管道那种接字节流将它解析为dom"

“而解析时,我觉得可以对标现在的各种转移编译工具,都有一个词法分析、语法分析、transfrom、genoretor的流程”

总之,DOM树是由浏览器解析HTML文档时生成的,它是HTML文档的抽象表示,是JavaScript操作网页的基础。