先抛出几个问题：
1、DomContentLoad是什么 ？
2、Load是什么 ？
3、paint是什么
4、js会阻塞dom的解析吗，js会阻塞dom的渲染吗 ？
5、css会阻塞dom的解析吗，css会阻塞dom的渲染吗 ？
6、img会阻塞dom的解析吗，img会阻塞dom的渲染吗 ？
7、js前有css 与 js前面无css 对html 的解析有什么区别 ？
8、总结下html的解析流程是什么
在讲解这几个问题之前，必须要用到一个工具，chrome开发者工具里的 Performance，如下图所示：
使用方法，在点击2的情况下，分析3，4，5就可以了。3是日志log，4主要记录了在html页面加载过程中的种种操作，5是4的具体某个操作对应的具体信息。
4里面主要有
Send Request 发送http请求
Receive Response 接收http返回数据
Parse HTML 解析html
Parse Stylesheet 解析css文件
Evaluate Script 执行js脚本
domContentLoadedEventEnd dom创建完成
Paint 渲染页面
loadEventEnd 页面加载完成
这些操作。
对于一二三这三个问题可以先解释了。
DomContentLoad就是dom创建完成时的事件
Load就是页面所有资源都加载之后的事件
paint就是页面绘制的事件
先后顺序： DomContentLoad --- paint --- Load
那么再来看第四个问题
这个问题很简单大家都知道，js会阻塞dom的解析,但js不会阻塞dom的渲染，因为此时js代码已经全部执行完成了。（还是简单说下验证方法，外部引入一个js脚本，你会发现js的脚本执行事件 Evaluate Script 是在 domContentLoadedEventEnd之前的）
再来看第五个问题，这个问题要看几种情况
1、整个页面只引入一个外部css文件
2、css页面后面有外部js文件
先来看第一种情况，这个时候
先解释下，此图无法截图paint，执行顺序 domContentLoadedEventEnd － Parse Stylesheet － Paint
domContentLoadedEventEnd在Parse Stylesheet之前，Parse Stylesheet在Paint前，说明css是不阻塞dom解析的，但是css 是阻塞dom渲染的。
再来看第二种情况，css文件后面有外部js文件
这个图可以很清楚的看出，css是阻塞了dom的解析的，这主要是因为css后面还有js，考虑到js可能会改变css属性，所有必须等到它前面的css执行完毕。
再来看第六个问题，img对html解析的影响
对于这个问题也得分两种情况来分析，不用分析js，因为js会阻塞dom的解析，在domContentLoadedEventEnd之前 ，而img decode在domContentLoadedEventEnd之后
1、没有外部css文件
2、有外部css文件
那么还是先来看第一种情况
此图可以清楚的看出，img对dom的解析没有阻塞，但是会阻塞dom的渲染（只是第一次返回的部分图片数据）。这里值得一提的是图片并不是一次性加载完成的，而是分了很多次请求才完全加载，如果用charles（青花瓷）模拟慢网速，会看得非常明显。
再来看第二种情况
可以看到css的解析是在图片首次解码前的。
到此处，应该是可以做一个总结了，但是不行，因为还有一点没有讲，看下图
看出什么重点了吗？ 浏览器是按顺序解析html文档的，但是浏览器解析html文档的第一步，是并行发出请求来请求所有的外部资源。然后再从头开始解析，如果有js等外部资源还没有加载则需要等待。
总结：
1. 解析HTML结构。
2. 并行加载脚本、样式表文件、img等外部资源
3、如有js文件未下载，则等待下载完成（js文件前如有css文件，则需要先等css文件下载完成）
4. 脚本下载后立即执行，然后从当前解析处开始解析
5. DOM树构建完成。//DOMContentLoaded
6. 解析外部css文件，img图片等资源
7. paint，渲染页面
8. 页面加载完毕。//load