将javascript代码插入html页面的主要方式是通过脚本标签。有两种形式，第一种是在脚本标签之间直接插入js代码，第二种是通过src属性引入外部js文件。由于解释器会在解析和执行js代码的过程中阻止页面其余部分的呈现，因此对于包含大量js代码的页面，它会在浏览器中造成长时间的空白和延迟。为了避免这个问题，建议将所有js引用放在/body标记之前。

脚本标签有两个属性，延迟和异步，因此脚本标签的使用可以分为三种情况：

1 . script src=' http : example . js '/script

如果没有defer或async属性，浏览器将立即加载并执行相应的脚本。也就是说，在渲染脚本标签后面的文档之前，不要等到稍后加载文档元素，读取之后才开始加载执行，这样会阻碍后续文档的加载；

2 .脚本异步src=' http : example . js '/脚本

带有async属性，意味着后续文档的加载和呈现以及js脚本的加载和执行是并行进行的，即异步执行；

3 .脚本延迟src=' http : example . js '/脚本

使用delay属性，加载后续文档的过程和js脚本的加载(此时只加载不执行)是并行的(异步的)，js脚本的执行需要等到文档的所有元素都被解析之后，在DOMContentLoaded事件触发执行之前。

下图可以直观的看出三者的区别：

其中，蓝色代表js脚本网络加载时间，红色代表js脚本执行时间，绿色代表html解析。

从图中，我们可以澄清几点：

1 .在网络加载过程中，delay和async是一致的，都是异步执行的；

2.两者的区别在于加载后脚本将在何时执行。可以看出，defer更符合大多数场景下加载和执行应用脚本的需求；

3.如果有多个具有defer属性的脚本，它们会根据加载顺序执行脚本；至于async，它的加载和执行是紧密相连的，加载一完成就会执行，与声明顺序无关。它对应用程序脚本用处不大，因为它根本不考虑依赖性。

总结：

延迟和异步的共同点是可以并行加载JS文件，而不会阻塞页面的加载。不同的是，JS会在defer加载后等待整个页面被加载，而async会在加载完成后立即执行JS。因此，如果JS执行有严格的顺序，建议使用defer来加载。

上面详细解释了边肖在JS中引入的脚本标签defer和异步属性之间的区别。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！