浏览器如何解析 HTML？

浏览器渲染引擎从网络层取得请求的文档，一般情况下文档会分成 8KB 大小的分块传输。

HTML 解析器的主要工作是对 HTML 文档进行解析，生成解析树。

解析树是以 DOM 元素以及属性为节点的树。DOM 是 文档对象模型（Document Object Model） 的缩写，它是 HTML 文档的对象表示，同时也是 HTML 元素面向外部（如 JavaScript）的接口。树的根部是 Document 对象。整个 DOM 和 HTML 文档几乎是一对一的关系。

解析算法

HTML 不能使用常见的自顶向下或自底向上方法来进行分析。主要原因有以下几点:

由于不能使用常用的解析技术，浏览器创造了专门用于解析 HTML 的解析器。解析算法在 HTML5 标准规范中有详细介绍，算法主要包含了两个阶段： 标记化（tokenization）和树的构建 。

解析结束之后

浏览器开始加载网页的外部资源（CSS，图像，JavaScript 文件等）。

此时浏览器把文档标记为 可交互的（interactive） ，浏览器开始解析处于 推迟（deferred） 模式的脚本，也就是那些需要在文档解析完毕之后再执行的脚本。之后文档的状态会变为 完成（complete） ，浏览器会触发 加载（load） 事件。

注意解析 HTML 网页时永远不会出现 无效语法（Invalid Syntax） 错误，浏览器会修复所有错误内容，然后继续解析。

DOM文档通常加载的步骤：

1.解析HTML结构。

2.加载外部脚本和样式表文件

3.解析并执行脚本代码。

4.DOM树构建完成。

//DOMContentLoaded

5.加载图片等外部资源。

6.页面加载完毕。

//load顺序是这样，但很多时候几个步骤是同时发生的。

  在这里梳理一下完整流程下的各种细节：

  由于浏览器采用至上而下的方式解析，所以会先解析html，直到遇到外部样式和外部脚本。这时会阻塞浏览器的

解析，外部样式和外部脚本（在没有async、defer属性下）会并行加载，但是外部样式会阻塞外部脚本的执行。

  即：html解析->外部样式、脚本加载->外部样式执行->外部脚本执行->html继续解析

  情况一：如果是动态脚本（即内联脚本）则不受样式影响，在解析到它时会执行。

  情况二：外部样式后续外部脚本含有async属性（IE下为defer），外部样式不会阻塞该脚本的加载与执行

（defer 会按照顺序在 DOMContentLoaded 前按照页面出现顺序依次执行，async 则是下载完立即执行）

  在外部样式执行完毕后，css附着于DOM，创建了一个渲染树（渲染树是一些被渲染对象的集）。每个渲染对象都

包含了与之对应的计算过样式的DOM对象，对于每个渲染元素来说，位置都经过计算，所以这里被叫做“布局”。然

后将“布局”显示在浏览器窗口，称之为“绘制”。

  接着脚本的执行完毕后，DOM树构建完成。这时，可以触发DOMContentLoaded事件。

  DOMContentLoaded事件的触发条件是：在所有的DOM全部加载完毕并且JS加载执行后触发。

 情况一：如果脚本是动态加载，则不会影响DOMContentLoaded时间的触发

 浏览器会等css加载完成后再加载图片，因为不确定图片的样式会如何。 

  要点一：CSS样式表会阻塞图片的加载，如果想让图片尽快加载，就不要给图片使用样式，比如宽高采用标签属性即可。

  要点二：脚本不会阻塞图片的加载

  最后页面加载完成，页面load

---