<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>异步加载</title> <script async type="text/javascript" src="https://www.jb51.net/test1.js"></script> <script async type="text/javascript" src="https://www.jb51.net/test2.js"></script> </head> <body> </body> </html>
这个例子中，test2.js可能会在test1.js之前执行。因此，确保两者之间互不一来非常重要。指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。因此，建议异步脚本不要在加载期间修改DOM。
来看一张更加清晰的图：
图解：蓝色线代表网络读取，红色线代表执行时间，这两个都是针对脚本的；绿色线代表 HTML 解析。
通过上图和之前的分析，我们可以得出：
1、defer 和 async 在网络读取（脚本下载）这块儿是一样的，都是异步的（相较于 HTML 解析）
2、两者的差别：在于脚本下载完之后何时执行，显然 defer 是最接近我们对于应用脚本加载和执行的要求的。defer是立即下载但延迟执行，加载后续文档元素的过程将和脚本的加载并行进行（异步），但是脚本的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。async是立即下载并执行，加载和渲染后续文档元素的过程将和js脚本的加载与执行并行进行（异步）。
3、关于 defer，我们还要记住的是它是按照加载顺序执行脚本的
4、标记为async的脚本并不保证按照指定它们的先后顺序执行。对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行。
5、async 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的。
总结
以上就是关于js中defer和async区别的全部内容，文章介绍的很详细，希望能对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。
您可能感兴趣的文章: