情况一：script在head内
- 验证方式 在head中加script标签
-
验证结果
1.png
- 得出结论：script在head内，会阻塞浏览器第一次paint这个毋庸置疑。
情况二：script在body中 （也是这次验证的重点）
-
验证方式 div＋script标签＋div...的形式,如下图
2.png
-
验证结果
3.png
4.png
-
分析情况
1.由上图可以看出浏览器第一次paint讲script标签位置之上的dom渲染出来了，接着遇到script标签阻塞加载运行脚本，然后再对之后的dom进行渲染。
2.浏览器的首次paint（firstPaint）和script标签的位置无关！！！script标签只会阻塞它之后的dom渲染。
3.浏览器在读取完所有dom之后会进行一次firstMeaningfulPaint。
4.其实我们更加关心的是浏览器的首次paint（firstPaint）
5.如果script放在</body>之前，那么firstPaint无限接近于firstMeaningfulPaint。 -
得出结论 ：script在body中，浏览器首次paint和script标签位置无关！！！
PS:
-
CSS阻塞DOM渲染:
1.无论是外链CSS还是内联CSS都会阻塞DOM渲染（Rendering），然而DOM解析（Parsing）会正常进行。
2.这意味着在CSS下载并解析结束之前，它后面的HTML都不会显示。 -
JS阻塞DOM解析
1.不论是内联还是外链JavaScript都会阻塞后续DOM解析（Parsing），当然后续DOM的渲染（Rendering）也被阻塞了。
2.JavaScript只会阻塞后续的DOM而非整个DOM，这意味着前面的DOM可以被正确地解析以及渲染。也就是以上解释的问题。 -
两者在表现上区别
body内，两个h1之间如果外链script那会发生两次paint，render。
body内，两个h1之间如果外内链样式那会发生一次paint，render。
