Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

从HTML到DOM的解析过程

  HTML是什么?说白了就是一堆具有固定格式的字符串而已,服务器发送过来的就是字符串。那么浏览器是如何把这些字符串,甚至只发了一半的字符串解析成DOM,并渲染出来的呢?W3C用了好几万个词的长问来描述这个,看W3C会蛋疼到死,所以我就简单说描述下。
  在W3C上可以找到这张图

  流只是Network用于传输的部分,在流输出了之后,所有的操作都不再经过它。
  “Tokeniser”(我觉得这里是Tokenizer的拼写错误)的工作是解析标记语言。
    从输入数据中匹配数据
      遇到标记时候匹配标记
      遇到非标记时尽可能多的匹配文本
    每匹配到一份数据就转到下一个环节处理
  这个环节并不对结果做其它操作,甚至不处理开始和结束标记。每次匹配到一份数据都立即丢给下一个环节处理,这意味着每次只发送一份数据到到下一个环节。
  “Tree Construction”是把“Tokeniser”的结果添加到文档树中,由于数据是一份份发送过来的,它也得根据数据逐步处理。
    遇到开始标记或文本数据
      创建这个节点,并附到当前操作节点上
      如果节点允许包含子节点则设置它为新的当前操作节点
      对特殊节点做相应的特殊处理
    遇到结束标记
      从当前操作节点向树根就近匹配相应的开始标记节点
        如果匹配到开始标记节点则设置当前操作节点为开始标记节点的父节点
        否则根据标记的不同做不同的处理
      对特殊节点做相应的特殊处理
    把创建的节点传到下一个环节处理
  这里的所谓“对特殊节点做相应的特殊处理”是处理一些替换型元素的节点。比如SCRIPT元素就是在这个步骤被解析并执行里面的代码。这个步骤之后会把创建的节点发送到下一个步骤。
  “DOM”这个步骤是为上一步创建了的节点DOM化,其实就是创建操作接口,使得节点可以在脚本中被操作。
  以上就是从HTML到DOM的过程,我给出的只是总结后的大致流程。对于一般的开发者而已了解这些基本足够了,如果想开发浏览器引擎那就就得慢慢享受W3C的虐了。

  参考:
    http://www.w3.org/TR/2011/WD-html5-20110405/parsing.html
    http://www.w3.org/TR/2011/WD-html5-20110405/tokenization.html
网名:
54.224.247.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^