重学前端六---HTML解析

207 阅读1分钟

HTML解析

一、文件拆分和接口设计

  • 为了方便文件管理,我们把parser单独拆到文件中
  • parser接受HTML文本作为参数,返回一颗DOM树(通过parser的parseHTML方法)

二、FSM来实现HTML的分析

  • 我们用FSM来实现HTML的分析
  • 在HTML标准中,已经规定了HTML的状态
  • Toy-Browser只挑选其中一部分状态,完成一个最简版本

三、解析标签

  • 主要的标签有:开始标签,结束标签和自封闭标签<div></div><br />
  • 在这一步我们暂时忽略属性

四、创建元素

  • 在状态机中,除了状态迁移,我们还会要加入业务逻辑
  • 我们在标签结束状态提交标签token

五、处理属性

  • 属性值分为单引号、双引号、无引号三种写法,因此需要较多状态处理
  • 处理属性的方式跟标签类似
  • 属性结束时,我们把属性加到标签Token上

六、构建DOM树

  • 从标签构建DOM树的基本技巧是使用栈
  • 遇到开始标签时创建元素并入栈,遇到结束标签时出栈
  • 自封闭节点可视为入栈后立刻出栈
  • 任何元素的父元素是它入栈前的栈顶

七、文本节点

  • 文本节点与自封闭标签类似
  • 多个文本节点需要合并