search

iidear / blog

blog
0 stars 0 forks source link

HTML && DOM #4

Open iidear opened 5 years ago

iidear commented 5 years ago

https://github.com/iidear/blog/issues/1#issuecomment-442760107

基本流程：解析 HTML 生成DOM，遇到 script 等待 js 执行，解析 CSS。 匹配 DOM 和 CSS，生成 Layout Tree，Plaint，Composit。

webkit main flow

图片出自 how-browser-works. 2011年发表的文章。8102 年了，还总能看到这张图。

iidear commented 5 years ago

HTML 解析 DOM https://html.spec.whatwg.org/#parsing

输入码点流，输出 Document 对象。

流程图 parsing-model-overview

  1. 从网络接收到 byte stream
  2. 使用编码嗅探算法识别编码。 HTML 规范指定的 编码集
  3. Tokenization 状态机
  4. Tree construction 使用tokens 生成 Document 对象

script && async && defer