浏览器首次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。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容