因为真正的数据的处理是由DocumentParser::appendBytes以及DocumentParser::finish后续调用来完成,所以咱们重点关注这两块

数据接收和解码

TextResourceDecoder

TextResourceDecoder::decode()

该函数中有个重要的操作是把收到的字符串转存到TextResourceDecoder:: m_buffer中。

这里先调用了TextResourceDecoder::checkForHeadCharset，该函数是个检查HTML头信息中是否有编码的信息，一般HTML的页面中如果指定了编码信息，那么编码信息会放在<head>标签中。该函数就是做这样的检查的。

每次新收到的字符串数据都会追加到这个TextResourceDecoder:: m_buffer中，用于TextResourceDecoder的处理。

之后会创建一个HTMLMetaCharsetParser，并赋值给TextResourceDecoder::m_charsetParser通过HTMLMetaCharsetParser::checkForMetaCharset方法来执行对编码的检测，如果检测到，则把获取到的编码TextEncoding类型设置给TextResourceDecoder。

在TextResourceDecoder中有成员TextEncoding m_encoding;和EncodingSource m_source;分别记录了Encodeing具体的类型和来源。

TextResourceDecoder中有成员OwnPtr<TextCodec>m_codec;它是负责真正的解码操作的,通过TextCodec:: decode进行解码，把TextResourceDecoder::m_buffer的数据传入，解码后会得到一个String类型的数据

DecodedDataDocumentParser

DecodedDataDocumentParser::appendBytes()

通过传入参数DocumentWriter 和 char* 调用writer->createDecoderIfNeeded()->decode 将网络数据转码,最后调用append

HTMLDocumentParser

HTMLDocumentParser::append

在DecodedDataDocumentParser::appendBytes中，当执行TextResourceDecoder::decode得到数据后，会执行append操作。该函数在HTMLDocumentParser中有实现，所以这里调用的是HTMLDocumentParser::append。并把解码后的String作为参数传入。在HTMLDocumentParser中有成员HTMLInputStream m_input;此处，把参数传入的String数据追加到HTMLDocumentParser::m_input，这样HTMLDocumentParser中已经保存了解码后的字符串了。

DocumentWriter

DocumentWriter::createDecoderIfNeed()

如果m_decoder为空，则创建一个实例，如果非空，则直接返回。

创建时会传入MimeType，TextEncoding等信息。创建的TextResourceDecoder会赋值给DocumentWriter::m_decoder。之后又做了些设置Encoding的操作。

再之后把这个新创建的TextResourceDecoder又设置给了Document(通过Frame找到Document)。看下Document的成员，也有一个RefPtr<TextResourceDecoder> m_decoder;这里把新创建的TextResourceDecoder又赋值给了Document::decoder。最后将创建的TextResourceDecoder返回,

DocumentWriter::begin()

//创建Document对象,创建DocumentParser对象

DocumentWriter::addData()

DocumentWriter::end()

解码过程已经完毕，我们又处于HTMLDocumentParser中，并且已经保存了解码后的输入数据

解析

前提：令牌（token）通常代表关键字、变量名、字符串、直接量和大括号等 语法标点。token：令牌，tokenize：令牌化，tokenizer：令牌解析器。

有效的词是token，这个过程是tokenizing，处理这个过程的工具是tokenizer。

调用 HTMLDocumentParser finish();

调用 HTMLDocumentParser attemptToEnd();

调用 HTMLDocumentParser prepareToStopParsing();

调用 HTMLDocumentParser pumpTokenizerIfPossible();

调用 HTMLDocumentParser pumpTokenizer();

//真正页面元素解析的地方，这里首先创建了一个PumpSession。

然后while循环，通过检查PumpSession的情况不停向下查找token来迭代所有元素进行解析，查到的token通过HTMLTokenizer nextToken

调用 HTMLTreeBuilder constructTreeFromToken();

//先利用参数传入的HTMLToken创建一个AtomicHTMLToken。这个AtomicHTMLToken跟HTMLToken成员非常类似，只是HTMLToken中一些信息如m_data，m_attributes中存的都是该信息在输入流数据中的范围（起始位置和终止位置），而在AtomicHTMLToken中存的都是跟输入流数据无关的数据类型了，并且根据HTMLToken把一些数据转换成有具体含义的成员，比如类型是StartTag，那么它的m_data就转换成AtomicHTMLToken:: m_name的值，即HTMLToken::m_data在该类型下是标签名称的含义。

在转换完AtomicHTMLToken后会做这样的判断，如果参数HTMLToken的类型不是Character则对其做clear操作即重置其成员

调用 HTMLTreeBuilder::constructTreeFromAtomicToken();

//该函数通过HTMLTreeBuilder::processToken来处理AtomicHTMLToken。

调用 HTMLTreeBuilder processToken();

//该函数对每种类型的AtomicHTMLToken做不同的分发处理。根据AtomicHTMLToken的类型，做转发处理，即调用相应的processXXX函数来处理与之对应的类型的AtomicHTMLToken,如当前是StartTag，则进入HTMLTreeBuilder ::processStartTag。

HTMLTreeBuilder中有成员InsertionMode  m_insertionMode;这个模式是保存当前插入模式，插入模式是什么.他其实还是实现一个有穷自动状态机，他根据输入的Token，来转换自身的状态，在状态转换函数中完成对Token的语法分析。在执行了状态转换后，开始利用Token进行DOM的构建时，调用了HTMLConstructionSite::insertHTMLXXX函数。

在HTMLTreeBuilder中有成员HTMLConstructionSite m_tree; HTMLTreeBuilder实际上完成的是对Token的识别，状态机的维护。根据传入的Token来运转状态机，通过状态机的转换函数，来找到需要执行哪种节点的创建，具体的节点的创建则是通过HTMLConstructionSite来完成的

如果当前的Token类型是StartTag，通过类型的识别，进入HTMLTreeBuilder::processStartTag的处理。通过状态机的处理，使得状态机的状态变成BeforeHTMLMode，在该状态下对StartTag类型的Token处理，就是执行HTMLConstructionSite::insertHTMLHtmlStartTagBeforeHTML。

Node的创建

HTMLConstructionSite::insertHTMLHtmlStartTagBeforeHTML

函数通过HTMLHtmlElement::create创建了一个HTMLHtmlElement，把HTMLConstructionSite::m_document作为参数传入，回忆一下Node中有成员Document*m_document;用于指明该Node属于哪个Document中。所以这里创建Node时，通过参数告诉它它的Document是谁。

看下HTMLHtmlElement的继承体系:

Node

ContainerNode

Element

StyledElement

HTMLElement

HTMLHtmlElement

其中在Node中定义了成员Document* m_document;和RenderObject* m_renderer;

在Element中定义了成员QualifiedName m_tagName;和mutableRefPtr<NamedNodeMap> m_attributeMap;

这几个都是很重要的成员，Document标识了该Node位于哪个Document下，每个Node只能在一个Document下，Document是该DOM树的根。

RenderObject标识了跟该Node对应的RenderObject是哪个，每个Node有一个跟其一一对应的RenderObject。

QualifiedName m_tagName标识了该Element的类型。

NamedNodeMap m_attributeMap标识了该Element的属性。

另外Node中还有成员负责构造树结构。

了解了这些成员信息后，继续看HTMLConstructionSite::insertHTMLHtmlStartTagBeforeHTML。

在创建了HTMLHtmlElement后，把AtomicHTMLToken中的属性设置给HTMLHtmlElement。

之后把该HTMLHtmlElement压入一个HTMLElementStack中。

该函数结束。经过上述的过程，从输入流中找到了一个<html>标签，该标签被识别成一个StartTag的HTMLToken，利用该HTMLToken在HTMLConstructionSite的处理中创建了一个HTMLHtmlElement，并把它压入栈HTMLConstructionSite:: m_openElements中。

HTMLToken中定义的几种HTMLToken的类型。

enum Type {

Uninitialized,  //未定义，默认

DOCTYPE,    //文档类型

StartTag,     //起始标签

EndTag,      //结束标签

Comment,    //注释

Character,    //元素内容

EndOfFile,    //文档结束

};

<html>

　　<head>

　　　　<metahttp-equiv="content-type" content="text/html;charset=UTF-8" />

　　</head>

　　<body>

　　　　<p>test content</p>

　　</body>

</html>

树构建阶段的输入是一个来自标记化阶段的标记序列。第一个模式是“initial mode”。接收 HTML 标记后转为“before html”模式，并在这个模式下重新处理此标记。这样会创建一个 HTMLHtmlElement 元素，并将其附加到 Document 根对象上。

然后状态将改为“before head”。此时我们接收“body”标记。即使我们的示例中没有“head”标记，系统也会隐式创建一个 HTMLHeadElement，并将其添加到树中。

现在我们进入了“in head”模式，然后转入“after head”模式。系统对 body 标记进行重新处理，创建并插入 HTMLBodyElement，同时模式转变为“body”。

现在，接收由“Hello world”字符串生成的一系列字符标记。接收第一个字符时会创建并插入“Text”节点，而其他字符也将附加到该节点。

接收 body 结束标记会触发“after body”模式。现在我们将接收 HTML 结束标记，然后进入“after after body”模式。接收到文件结束标记后，解析过程就此结束

在此阶段，浏览器会将文档标注为交互状态，并开始解析那些处于“deferred”模式的脚本，也就是那些应在文档解析完成后才执行的脚本。然后，文档状态将设置为“完成”，一个“加载”事件将随之触发。

<html>的解析

在HTMLTokenizer::nextToken中会把HTMLDocumentParser::m_token传入，这里是引用方式传的，即他们使用的是同一个HTMLToken。

在初始时，HTMLTokenizer::m_state为DataState。该HTMLToken类型为Uninitialized。

读取了’<’时，HTMLTokenizer::m_state变为TagOpenState。HTMLToken类型Uninitialized。

读取了’h’时，HTMLTokenizer::m_state变为TagNameState。HTMLToken类型变为StartTag，并清除了属性列表和当前属性，把当前字符’h’加入到HTMLToken::m_data中。

读取了’t’时，HTMLTokenizer::m_state为TagNameState。HTMLToken类型为StartTag，把当前字符’t’加入到HTMLToken::m_data中。

读取了’m’，’l’时，同上。

读取了’>’时，HTMLTokenizer::m_state变为DataState。HTMLToken类型为StartTag 。HTMLTokenizer::nextToken函数执行了return操作。

经过上述，HTMLTokenizer::nextToken完成了一个“词”的分析，即经过对”<html>”的读取后，得到了一个类型为StartTag的HTMLToken，并且其m_data为”html”。

之后通过HTMLTreeBuilder:: constructTreeFromToken把该HTMLToken进行语法分析。

HTMLTokenizer::nextToken是在HTMLDocumentParser::pumpTokenizer中运行的，HTMLDocumentParser有成员OwnPtr<HTMLTreeBuilder>m_treeBuilder;该成员是在HTMLDocumentParser构造时一并创建的。

这里回顾一下，Document类有成员DocumentParser，而HTMLDocument类是Document的子类，HTMLDocumentParser是DocumentParser的子类。即HTMLDocument类中有HTMLDocumentParser成员。这两个是相互对应的。在HTMLDocumentParser创建时，HTMLDocument把自身作为参数传入。HTMLDocumentParser的构造函数中会同时创建HTMLTreeBuilder，HTMLTreeBuilder会收到HTMLDocument的指针，并记录在其成员HTMLTreeBuilder:: m_document。另外还有成员HTMLTreeBuilder::m_parser记录了HTMLDocumentParser的指针。

<html>后面的换行符的解析

回到HTMLDocumentParser::pumpTokenizer中。

在While循环中再次进入HTMLTokenizer::nextToken。

此时， HTMLTokenizer::m_state为DataState。该HTMLToken类型为Uninitialized。

读取了’换行符’时，HTMLTokenizer::m_state为DataState。HTMLToken类型变为Character。把当前字符’换行符’加入到HTMLToken::m_data中。

读取了’<’时，HTMLTokenizer::m_state为DataState。HTMLToken类型为Character。HTMLTokenizer::nextToken返回。

在HTMLDocumentParser::pumpTokenizer中进入HTMLTreeBuilder::constructTreeFromToken

在HTMLTreeBuilder::processCharacterBuffer中，判断m_insertionMode为BeforeHeadMode后，在处理流程中，会对字符串进行检测，发现除了空白字符没有其他字符后，直接返回。

调用 HTMLTreeBuilder::constructTreeFromAtomicToken

调用 HTMLTreeBuilder::processToken

调用 HTMLTreeBuilder::processCharacter

调用 HTMLTreeBuilder::processCharacterBuffer

在HTMLTreeBuilder::processCharacterBuffer中，判断m_insertionMode为BeforeHeadMode后，在处理流程中，会对字符串进行检测，发现除了空白字符没有其他字符后，直接返回。

<head>的解析

回到HTMLDocumentParser::pumpTokenizer中。

此时， HTMLTokenizer::m_state为DataState。该HTMLToken类型为Uninitialized。

状态机的处理类似对<html>的处理

这里生成的Token的名字是headTag。用该Token创建了一个HTMLElement。

之后调用了一个HTMLConstructionSite::attachToCurrent。这个Current是谁呢？它就是HTMLConstructionSite::m_openElements这个栈的栈顶元素，记得刚才创建HTMLHtmlElement的过程中，把HTMLHtmlElement压入栈了，现在获取到的栈顶元素就是刚才的HTMLHtmlElement。这个attach的过程就是把两个 Node建立成父子关系。

再之后把新的HTMLElement压入栈。

由此可见，每次收到一个开始标签时，创建一个新的HTMLElement后，会把这个新的HTMLElement入栈，这样通过栈情况就能够找到待插入节点的父节点（栈顶元素）。即新的元素都是属于这个最近的开始标签的子Node。由此可知，当收到结束标签时，应该会有出栈的操作，这样栈顶元素还是标识这新Node的父节点。即栈维护了标签的开关情况，这个栈类似于函数调用，当进入某个函数时，函数入栈，当继续进入子函数时，子函数入栈。当函数返回时，该函数出栈。通过函数栈能够识别某个函数的嵌套位置，同样通过这个标签栈可以识别某个标签的嵌套位置。

<metahttp-equiv="content-type" content="text/html;charset=UTF-8" />的解析

回到HTMLDocumentParser::pumpTokenizer中。

在处理<meta时跟<html>标签前面一样，此时HTMLTokenizer::m_state为TagNameState。HTMLToken类型为StartTag

读取了’空格’时，HTMLTokenizer::m_state变为BeforeAttributeNameState。HTMLToken类型为StartTag。

读取了’h’时，HTMLTokenizer::m_state为BeforeAttributeNameState。HTMLToken类型为StartTag。通过HTMLToken::addNewAttribute让HTMLToken::m_attributes中开辟一个新的属性空间，HTMLToken中有个成员Attribute* m_currentAttribute;用于指向当前的属性的，即它现在指向新开辟的属性空间的地址。通过HTMLToken:: beginAttributeName设置该属性名字的起始范围，通过HTMLToken::appendToAttributeName把字符’h’加入。可见在HTMLToken中有一些专门用来维护属性信息的函数，在HTMLTokenizer解析到属性信息时，他的HTMLToken没有发生变化，仍然是StartTag，但是状态机的状态变成了BeforeAttributeNameState，并且状态处理函数中，对数据的解析会导致HTMLToken属性的设置。

读取了’t’时，HTMLTokenizer::m_state变为AttributeNameState。HTMLToken类型为StartTag。把当前字符’t’加入到HTMLToken的当前属性名中。

读取”tp-equiv”跟读取上面的’t’字符流程一样。

读取了’=’时，HTMLTokenizer::m_state变为BeforeAttributeValueState。HTMLToken类型为StartTag。通过HTMLToken::endAttributeName设置属性名字的结束偏移和属性值的开始及结束便宜。这里属性值还没有开始也没结束呢，这里设置可能是为了避免html页面中没写属性值的情况吧。

读取了’双引号’时，HTMLTokenizer::m_state变为AttributeValueDoubleQuotedState。HTMLToken类型为StartTag。通过HTMLToken::beginAttributeValue设置属性开始偏移。

读取了’c’时，HTMLTokenizer::m_state为AttributeValueDoubleQuotedState。HTMLToken类型为StartTag。把当前字符’c’加入到HTMLToken的当前属性值中。

读取”ontent-type”跟读取上面的’c’字符流程一样。

读取了’双引号’时，HTMLTokenizer::m_state变为AfterAttributeValueDoubleQuotedState。HTMLToken类型为StartTag。通过HTMLToken::endAttributeValue设置属性结束偏移。

读取了’空格’时，HTMLTokenizer::m_state变为BeforeAttributeValueState。HTMLToken类型为StartTag。

读取了’c’时，HTMLTokenizer::m_state变为AttributeValueState。HTMLToken类型为StartTag。执行跟上面读取了’h’时同样的创建属性的流程。

读取了”ontent="text/html; charset=UTF-8"”的流程跟上述对应的流程一样。

读取了’空格’时，HTMLTokenizer::m_state变为BeforeAttributeValueState。HTMLToken类型为StartTag。

读取了’/’时，HTMLTokenizer::m_state变为SelfClosingStartTagState。HTMLToken类型为StartTag。

读取了’>’时，通过HTMLToken::setSelfClosing设置其自关闭性质。之后执行返回，退出HTMLTokenizer::nextToken。

这里生成的Token的名字是metaTag。用该Token创建了一个HTMLElement。设置他的属性，把他attach到之前的<head>标签创建的HTMLElement上。

</head>的处理

回到HTMLDocumentParser::pumpTokenizer中。

有了上述的基础，看这个标签就比较容易了，跟<head>非常类似，只是对这个标签的处理时，HTMLToken类型为EndTag。

在HTMLTreeBuilder对该HTMLToken的处理时，会对HTMLConstructionStie::m_openElements执行出栈操作，即之前所讲到的，并更新HTMLTreeBuilder的状态机情况。这里没有再创建新的Node了。

之后的其他标签的处理都是类似的，以下显示几个处理标签的对应的HTMLToken的栈情况：

通过上述对Token的处理可知，在HTMLTokenizer::nextToken中根据状态机进行词法分析能够分离出一个个的HTMLToken，这些利用HTMLTreeBuilder::constructTreeFromToken进行语法分析能够识别它在当前的状态下要创建什么类型的Node。

HTMLTreeBuilder用于做这期间的语法分析，他会先根据HTMLToken的类型做分发处理（即通过processXXX），在某个分支处理中，又会根据HTMLTreeBuilder自身维护的状态机的状态情况做判断，进一步分发处理。也就是说HTMLTreeBuilder即会考虑当前的状态，也会考虑HTMLToken的类型，他的状态相当于该HTMLToken当前所处的环境。

HTMLTreeBuilder最终会通过HTMLConstructionSite来执行相应Node的创建（即通过insertXXX）。

另外注意在HTMLConstructionSite中有成员mutable HTMLElementStack m_openElements;用于维护一个HTMLElement的栈，这个栈用户维护标签的开始和结束的情况，即维护标签的层级关系，用于确定某个Node插入到哪个Node下面，即确定相互的父子关系。

而这里创建的所有的节点，都有一个公共的Document，即HTMLDocument中的成员HTMLDocumentParser中的成员HTMLTreeBuilder中的Document* m_document;这个Document就对应开始的HTMLDocument。

由此可见，后续创建的所有的Node都是HTMLDocument的后代节点。

解析过程

Webkit一：Dom转码和解析的更多相关文章

  1. dojo/dom源码

    dojo/dom源码学习   dojo/dom模块作为一个基础模块,最常用的就是byId方法.除此之外还有isDescendant和setSelectable方法. dom.byId(myId)方法: ...

  2. mybatis 3.x源码深度解析与最佳实践（最完整原创）

    mybatis 3.x源码深度解析与最佳实践 1 环境准备 1.1 mybatis介绍以及框架源码的学习目标 1.2 本系列源码解析的方式 1.3 环境搭建 1.4 从Hello World开始 2 ...

  3. Vue源码详细解析:transclude,compile,link,依赖,批处理...一网打尽，全解析!

    用了Vue很久了,最近决定系统性的看看Vue的源码,相信看源码的同学不在少数,但是看的时候却发现挺有难度,Vue虽然足够精简,但是怎么说现在也有10k行的代码量了,深入进去逐行查看的时候感觉内容庞杂并 ...

  4. 使用CEF（三）— 从CEF官方Demo源码入手解析CEF架构与CefApp、CefClient对象

    在上文<使用CEF(2)- 基于VS2019编写一个简单CEF样例>中,我们介绍了如何编写一个CEF的样例,在文章中提供了一些代码清单,在这些代码清单中提到了一些CEF的定义的类,例如Ce ...

  5. iOS开发之Masonry框架源码深度解析

    Masonry是iOS在控件布局中经常使用的一个轻量级框架,Masonry让NSLayoutConstraint使用起来更为简洁.Masonry简化了NSLayoutConstraint的使用方式,让 ...

  6. Atitit zxing二维码qr码识别解析

    Atitit zxing二维码qr码识别解析 1.1. qr码识别解析 by zxing1 1.2. 解码lib:qrcode.jar  2 1.3. atitit.二维码生成总结java zxing ...

  7. [开源]C#二维码生成解析工具，可添加自定义Logo

    二维码又称 QR Code,QR 全称 Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的 Bar Code 条形码能存更多的信息,也能表示更多的数据类型:比如:字 ...

  8. Retrofit源码设计模式解析（下）

    本文将接着<Retrofit源码设计模式解析(上)>,继续分享以下设计模式在Retrofit中的应用: 适配器模式 策略模式 观察者模式 单例模式 原型模式 享元模式 一.适配器模式 在上 ...

  9. 源码深度解析SpringMvc请求运行机制（转）

    源码深度解析SpringMvc请求运行机制 本文依赖的是springmvc4.0.5.RELEASE,通过源码深度解析了解springMvc的请求运行机制.通过源码我们可以知道从客户端发送一个URL请 ...

随机推荐

  1. Visual Code 自定义插件安装位置

    修改快速方式通过传入方式启动 ,示例: D:\installed_green_soft\VSCode\Code.exe --extensions-dir "D:\installed_gree ...

  2. springboot+Jib+Maven+Idea+Docker 实践

    Jib - Containerize your Maven project 2. Jib+Maven+Springboot 实践代码例子 2.1在maven项目中的pom.xml文件中配置Jib插件 ...

  3. foj Problem 2275 Game

    Problem D Game Accept: 145    Submit: 844Time Limit: 1000 mSec    Memory Limit : 262144 KB Problem D ...

  4. Python入门--15--文件读取、保存

    先看文件读取,open 1.文件打开模式: 打开模式 执行操作 'r' 以只读方式打开文件(默认) 'w'    以写入的方式打开文件,会覆盖已存在的文件 'x' 如果文件已经存在,使用此模式打开将引 ...

  5. poj 2112(二分+网络流)

    Optimal Milking Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 15749   Accepted: 5617 ...

  6. 从壹开始 [ Ids4实战 ] 之三║ 详解授权持久化 & 用户数据迁移

    回顾 哈喽大家周三好,今天终于又重新开启 IdentityServer4 的落地教程了,不多说,既然开始了,就要努力做好

  7. Codeforces 245G Suggested Friends 暴力乱搞

    G. Suggested Friends time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  8. 快速掌握分布式搜索引擎ElasticSearch（一）

    前言 由于最近在项目中接触使用到了ElasticSearch,从本篇博客开始将给大家分享这款风靡全球的产品.将涉及到ElasticSearch的安装.基础概念.基本用法.高级查询.中文分词器.与Spr ...

  9. sqlserverinternals.com

    http://sqlblog.com/blogs/kalen_delaney/default.aspx https://sqlserverinternals.com/

  10. CSS3模拟IOS滑动开关

    前言 H5站点需要IOS滑动按钮的效果,想了想似乎CSS3能搞起,就折腾出来了...挺简单的..请看注释 效果 代码 <!DOCTYPE html> <html lang=" ...