＜script＞标签的defer和async

        其实本来想说一下浏览器从接受到一个HTML文件到把它渲染出来这一整个流程的，但是网上已经有很好的文章了，这里就不在赘述，本篇文章主要举例几个我发现和理论不相符的点。阅读本文之前最好看一下下面推荐的文章。

浏览器渲染阅读推荐：

深入理解浏览器解析渲染HTML - 掘金 (juejin.cn)

浏览器解析渲染HTML文档的过程 - SegmentFault 思否

了解html页面的渲染过程 - yuezk - 博客园 (cnblogs.com)

再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载 - 知乎 (zhihu.com)

        在说defer和async之前，先来说一下没有这两个属性的

        这个内联的JS代码会在HTML解析到

        这里如果按照网上的说法，过程应该是：从上到下先解析HTML代码，解析到//执行heavyWork1 //执行heavyWork2

直接上图：

         这里和上面的情况其实差不多，这里明明是一个外联的

 

         这里的HTML页面一次性被解析完，但是解析完后JS文件还没下载好，中间就空了一段时间，被阻塞了，这里因为预加载，所以和上面的图例有点不一样。

        再来看看async的情况：

    
    
    
    



    
12132

        

        这里因为我测试的HTML文件太小了，一下子就解析完了，所以不能体现出脚本下载好后，打断HTML解析这一现象， 而且两个JS文件也还是按顺序执行的，可能是这两个文件大小差不多的原因，第一个JS文件如果很大，第二个JS文件里的代码可能就会先运行，这里就不测试了。

        最后希望大家能多多找出我的错误，因为里面有一些我的推测，大家一起进步！