浏览器首次paint和script标签位置关系

情况一：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。