JS中script脚本的执行顺序

JS中script脚本的执行顺序

在HTML中引入script脚本时，最普通的用法是直接引用，此时浏览器按顺序解析HTML，当解析到script的位置时，加载脚本并在加载完毕时立即执行脚本，在加载和执行的过程中会暂停HTML的解析。此种方法的问题是一旦因为某些原因导致脚本的加载时间过长，会影响页面的渲染，降低用户体验。所以在script标签中存在两个参数async和defer，可以控制脚本的加载和执行时间。

async

async表示异步，script标签中有async参数时，浏览器会在解析到此处时异步加载脚本，加载完毕后立即执行脚本，只有在执行脚本的时候才停止页面的渲染过程，此种脚本的加载不计入DOMContentLoaded事件统计，意味着脚本的执行与DOMContentLoaded事件的执行顺序没有关联。如果有多个async脚本，谁先加载完谁先执行

defer

script标签中有defer参数时，浏览器会在解析到此处时异步加载脚本，但是不会立即执行，而是等到文档解析渲染完毕之后再执行脚本。如果有多个defer脚本，则按照文档中的顺序执行，全部执行完毕才会触发页面的DOMContentLoaded事件
此篇文章参考了以下两篇文章，在此表示感谢

https://www.cnblogs.com/jiasm/p/7683930.html
https://www.cnblogs.com/echolun/p/12614056.html