- 1Eclipse的C与C++插件_eclipsec语言插件
- 2LivePortrait 数字人：开源的图生视频模型，本地部署和专业视频制作详细教程_liveportrait s
- 3在本地训练您自己的Stable Diffusion稳定扩散模型 - 无需代码_stable diffusion 本地 训练
- 4Python实现机器学习算法：朴素贝叶斯算法
- 5SQL COUNT() 函数深入解析_sql中的count
- 6pe启动盘破解windows密码wins电脑登录密码修改重置_pe修改开机密码windows密码
- 7体验字节跳动豆包AI大模型生成OpenAI创始人萨姆·奥尔特曼Biography_萨姆奥尔特曼的具体贡献
- 8顺序表查找——顺序查找、有序表查找（多种方法）及次优查找树_1.在顺序表中采用顺序查找方法查找关键字7。 测试:(6,8,9,4,1,7,8,6)
- 9Python开发程序中找到未排序数组中的第K大元素：高效算法与实现
- 10oracle棘手的面试题,Oracle的四道经典面试题分享
chromium 之 DOM tree 解析和创建(代码调试)_chromium dom解析 pumptokenizerifpossible
赞
踩
平台： WIN10
调试工具： vs2019
chromium： 78.0.3904.108
解析网站： www.so.com
(有条件的小伙伴建议根据文章里的断点，自己调试，分析堆栈和查看数据的结构，可能会有不同的理解)
WebKit构建DOM所使用的主要基础设施类
下图是 chromium webkit 构建 dom 树时，主要用到的类，我们会在下图中部分类的实现中，进行跟踪，分析 dom 的构建过程
1.DocumentLoader
(src\third_party\blink\renderer\core\loader\document_loader.cc)
在 DocumentLoader 类的构造函数 DocumentLoader::DocumentLoader 打断点，查看堆栈：
根据堆栈，可以看出从 LocalFrame 初始化到 DocumentLoader 构造的堆栈过程。
2.HTMLTreeBuilder
(src\third_party\blink\renderer\core\html\parser\html_tree_builder.cc)
在 HTMLTreeBuilder 类的 HTMLTreeBuilder::ConstructTree 实现中 打断点，查看构造tree 的堆栈：
DocumentLoader::FinishedLoading 完成加载 html 资源后，调用 HTMLDocumentParser::Finish
HTMLDocumentParser 可以理解为管理类，通过 HTMLDocumentParser 调用其他工作的类 开始解析 html。
3.HTMLDocumentParser
(src\third_party\blink\renderer\core\html\parser\html_document_parser.cc)
在 HTMLDocumentParser::PumpPendingSpeculations 的开头打断点，然后跟到下图处：
其中， speculations_ 保存的是 html 信息，由 BackgroundHTMLParser::PumpTokenizer() 调用 EnqueueTokenizedChunk 拆成多组并保存。如下图堆栈：
拆分的逻辑遇到以下特征时，则进行拆分，代码如下：
将数据存放到 speculations_ 后，循环解析，在 HTMLDocumentParser::PumpPendingSpeculations 中 while 循环解析，堆栈如下：
跟踪到 HTMLDocumentParser::ProcessTokenizedChunkFromBackgroundParser 中，从 speculations_ 中的每组数据中，进行分别解析。
我们可以先看下 www.so.com 的资源：
解析 speculations_ 的第一组数据，包括如下：
观察 tokens 中的数据，便是 www.so.com 中每个元素解析后的数据:
4. HTMLConstructionSite
(\src\third_party\blink\renderer\core\html\parser\html_construction_site.cc)
跟踪从 HTMLDocumentParser::ProcessTokenizedChunkFromBackgroundParser 中每个token 的之后的逻辑，
会执行到 HTMLConstructionSite::ExecuteQueuedTasks() ，堆栈如下：
将 token 中的元素进行解析构建，知道把 www.so.com 的第一个 <html class="w3c"> 解析完成后，dom tree 结构如下：
在图中可以看到，open_elements_ 中的 stack_depth_ 深度为1。
此处入栈和出栈的规则如下：
1. 遇到起始的 token，则入栈
2. 遇到结束的 token，则出栈
譬如，我们执行到下图中的 title 时
查看堆栈及数据结构：
tree_ 中 open_elements_ 为三层，之前的 meta 标签已经出栈。
将 www.so.com 的 html 资源全部解析完成后，变完成了 dom tree 的构造过程。
