js script中的defer和async

在HTML中，<script>标签可以使用async和defer两个属性来控制外部JavaScript文件的加载和执行方式。这两个属性的目的是优化页面加载时间，但它们以不同的方式工作。下面是每个属性的具体说明：

async属性

• 当你给<script>标签添加async属性时，浏览器会异步加载脚本。这意味着脚本会在页面继续解析的同时被加载，而不会阻塞文档的解析。
• 一旦脚本下载完成，浏览器会暂停HTML的解析，执行脚本，然后再继续解析HTML。
• 多个async先下载完的先执行

async属性适用于那些不依赖于其他脚本，同时也不被其他脚本依赖的情况，因为它不能保证脚本的加载顺序。

defer属性

• 当你给<script>标签添加defer属性时，浏览器也会异步加载脚本，但与async不同的是，defer脚本会等到整个文档都解析完毕后，且在DOMContentLoaded事件触发之前执行。
• 这意味着不管脚本何时完成加载，它的执行都会等到文档解析完毕。
• 多个defer等待所有defer下载完依次执行。

defer属性适用于那些依赖于DOM或其它脚本，或者被其它脚本依赖的场景。

总结

下面是一个表格，比较这两个属性的不同之处：

特性	async	defer
加载方式	并行加载脚本	并行加载脚本
执行时机	脚本下载完成后立即执行（可能会在文档解析完成前）	文档解析完成后，DOMContentLoaded事件触发前执行
执行顺序	不能保证脚本按照在文档中出现的顺序执行	保证脚本按照在文档中出现的顺序执行
适用场景	不依赖DOM，不依赖其它脚本的独立模块	依赖DOM，或其它脚本，且不影响文档显示的脚本