• 浏览器的DOM树构建算法

    如何创建DOM树
    服务器君一共花费 18.569 ms 进行了 3 次数据库查询,努力地为您提供了这个页面。
    广告很萌的

    在创建解析器的同时,也会创建 Document 对象。在树构建阶段,以 Document 为根节点的 DOM 树也会不断进行修改,向其中添加各种元素。标记生成器发送的每个节点都会由树构建器进行处理。

    规范中定义了每个标记所对应的 DOM 元素,这些元素会在接收到相应的标记时创建。这些元素不仅会添加到 DOM 树中,还会添加到开放元素的堆栈中。此堆栈用于纠正嵌套错误和处理未关闭的标记。其算法也可以用状态机来描述。这些状态称为“插入模式”。

    让我们来看看示例输入的树构建过程:

    <html>
      <body>
        Hello world
      </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”模式。接收到文件结束标记后,解析过程就此结束。

    示例 HTML 的树构建

    解析结束后的操作

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

    您可以在 HTML5 规范中查看标记化和树构建的完整算法 。

更多 推荐条目

Welcome to NowaMagic Academy!

现代魔法 推荐于 2013-02-27 10:23   

本章最新发布
随机专题
  1. [软件工程与项目管理] 开始使用Git 3 个条目
  2. [软件工程与项目管理] 浏览器的HTML解析器 8 个条目
  3. [计算机算法] 两数交换的各种算法细节 2 个条目
  4. [移动开发] 从代码角度去认识 Handler 4 个条目
  5. [软件工程与项目管理] 了解一点WebKit 9 个条目
  6. [JavaScript程序设计] 关于HTTP Keep-Alive 6 个条目
  7. [JavaScript程序设计] Web实时通信技术名词解析 5 个条目
  8. [移动开发] Android抽屉导航NavigationDrawer 5 个条目
  9. [PHP程序设计] PHP扩展模块安装 1 个条目
  10. [JavaScript程序设计] jQuery与表单操作 2 个条目
  11. [Python程序设计] Tornado表单处理 3 个条目
  12. [C语言程序设计] 结构体基本知识 1 个条目
窗口 -- [资讯]