DOM树的构建从何时开始？

Question

浏览器的解析过程应该是先构建DOM树和CSS树然后生成渲染树，然后渲染。那么在这个过程中，DOM树的构建是从何时开始的呢？
是向服务器请求到整个html才开始，还是下载一部分先加载在下载剩下部分？
如果是分步加载那么构建DOM树的同时是不是也会同时构建这一部分的css树？还是说DOM树时下载时构建，CSS树也是边下载边构建且不和DOM树有对应关系？

Answer 1

DOM树的构建是从接受到文档开始的 一边会进行将字节转化为字符 字符转化为标记 标记构建dom树
这个过程被分为标记化和树构建
而这是一个渐进的过程。为达到更好的用户体验，呈现引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后，就会开始构建呈现树和设置布局。在不断接收和处理来自网络的其余内容的同时，呈现引擎会将部分内容解析并显示出来。

Answer 2

可以从Chrome devtools里的Performance里面看到，先recieve data 然后再parse HTML

Answer 3

浏览器渲染机制

1. 

1. 用户输入一个URL的时候，浏览器就会发送一个请求，请求URL对应的资源。

2. 浏览器的HTML解析器会将这个文件解析，并且构建成一棵DOM树。(在生成DOM的最开始阶段（应该是Bytes → characters后），并行发起css、图片、js的请求，无论他们是否在HEAD里。)

   • 注意：发起js文件的下载request并不需要DOM处理到那个script节点，比如：简单的正则匹配就能做到这一点，虽然实际上并不一定是通过正则：）。这是很多人在理解渲染机制的时候存在的误区

3. 在构建DOM树的时候，遇到 js 和 CSS元素，HTML解析器就换将控制权转让给JS解析器或者是CSS解析器。开始构建CSSOM

4. DOM树构建完之后，浏览器把DOM树中的一些不可视元素去掉，然后与CSSOM合成一棵render tree。

5. Layout：有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为Layout，顾名思义就是计算出每个节点在屏幕中的位置。

6. Painting：Layout后，浏览器已经知道了哪些节点要显示（which nodes are visible）、每个节点的CSS属性是什么（their computed styles）、每个节点在屏幕中的位置是哪里（geometry）。就进入了最后一步：Painting，按照算出来的规则，通过显卡，把内容画到屏幕上。

以上几个步骤因为DOM、CSSOM、Render Tree都可能在第一次Painting后又被更新多次，比如JS修改了DOM或者CSS属性。Layout和Painting也会被重复执行，除了DOM、CSSOM更新的原因外，图片下载完成后也需要调用Layout 和 `Painting来更新网页