HTML解析过程

1. Parse HTML: 创建Document对象，解析按顺序HTML元素

2. 并行加载脚本、样式表文件、img等外部资源

3. 如果html解析的过程遇到 link 标签，就会去请求加载css文件，css文件完整加载完毕后才开始构建CSSOM，在解析CSSOM的过程不会阻塞html文档的解析

4. 如果html解析的过程遇到了内联style则会直接解析，这个解析过程与DOM的构建同时进行

5. Evaluate Script: 如果html解析的过程遇到 script 标签（没有defer，async），解析就会暂停并开始请求加载和执行js文件，如果是内联 script 就直接执行

6. 如果html解析的过程中遇到img，就会去异步去请求加载图片，不会阻塞页面解析，图片的加载会引起页面回流（预设定好尺寸

7. DOM树构建完成（DOMContentLoaded ）

8. Parse Stylesheet 解析外部css文件，img图片等资源,构建建 CSSOM

9. Paint，生成render tree，渲染页面

10. 页面加载完毕（load）

思考问题：

Parse HTML - Evaluate Script - domContentLoadedEventEnd - Parse Stylesheet － Paint

js会阻塞dom的解析,但js不会阻塞dom的渲染

domContentLoadedEventEnd － Parse Stylesheet － Paint

domContentLoadedEventEnd在Parse Stylesheet之前，Parse Stylesheet在Paint前，说明css是不阻塞dom解析的，但是css 是阻塞dom渲染的。

domContentLoadedEventEnd - img decode - Paint

img是不阻塞dom解析的， 但是阻塞dom渲染的。

浏览器是按顺序解析html文档的，但是浏览器解析html文档的第一步，是并行发出请求来请求所有的外部资源。然后再从头开始解析，如果有js等外部资源还没有加载则需要等待。