JS中script标签defer和async属性的区别详解
向html页面中插入javascript代码的主要方法就是通过script标签。其中包括两种形式，第一种直接在script标签之间插入js代码，第二种即是通过src属性引入外部js文件。由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染，对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟，为了避免这个问题，建议把全部的js引用放在</body>标签之前。
script标签存在两个属性，defer和async，因此script标签的使用分为三种情况：
1.<script src="example.js"></script>
没有defer或async属性，浏览器会立即加载并执行相应的脚本。也就是说在渲染script标签之后的文档之前，不等待后续加载的文档元素，读到就开始加载和执行，此举会阻塞后续文档的加载；
2.<script async src="example.js"></script>
有了async属性，表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的，即异步执行；
3.<script defer src="example.js"></script>
有了defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本的执行需要等到文档所有元素解析完成之后，DOMContentLoaded事件触发执行之前。
下图可以直观的看出三者之间的区别:
其中蓝色代表js脚本网络加载时间，红色代表js脚本执行时间，绿色代表html解析。
从图中我们可以明确一下几点：
1.defer和async在网络加载过程是一致的，都是异步执行的；
2.两者的区别在于脚本加载完成之后何时执行，可以看出defer更符合大多数场景对应用脚本加载和执行的要求；
3.如果存在多个有defer属性的脚本，那么它们是按照加载顺序执行脚本的；而对于async，它的加载和执行是紧紧挨着的，无论声明顺序如何，只要加载完成就立刻执行，它对于应用脚本用处不大，因为它完全不考虑依赖。
小结：
defer 和 async 的共同点是都是可以并行加载JS文件，不会阻塞页面的加载，不同点是 defer的加载完成之后，JS会等待整个页面全部加载完成了再执行，而async是加载完成之后，会马上执行JS，所以假如对JS的执行有严格顺序的话，那么建议用 defer加载。
以上所述是小编给大家介绍的JS中script标签defer和async属性的区别详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！
-
本文向大家介绍全面了解js中的script标签，包括了全面了解js中的script标签的使用技巧和注意事项，需要的朋友参考一下 在页面中用script标签引入javascript文件（<script type="text/javascript" src="js文件地址"></script>），浏览器在渲染页面的时候，当读取到script元素时，浏览器不会以HTML或XHTML的方式处理其内容，浏览
-
本文向大家介绍link标签和import标签的区别?相关面试题，主要包含被问及link标签和import标签的区别?时的应答技巧和注意事项，需要的朋友参考一下 参考回答： link属于html标签，而@import是css提供的 页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。 link是html标签，因此没有兼容性，而@import只有IE5以上才能识别
-
本文向大家介绍JavaScript无阻塞加载和defer、async详解，包括了JavaScript无阻塞加载和defer、async详解的使用技巧和注意事项，需要的朋友参考一下 无阻塞加载 把js放在head里，浏览器是怎么去执行它的呢，是按顺序加载还是并行加载呢？在旧的浏览器下，都是按照先后顺序来加载的，这就保证了加载的js依赖不会发生问题。但是少部分新的浏览器已经开始允许并行加载js了，也就
-
本文向大家介绍浅谈js script标签中的预解析，包括了浅谈js script标签中的预解析的使用技巧和注意事项，需要的朋友参考一下 首先介绍预解析，虽然预解析字面意思很好理解，但是却是出坑出的最多的地方，也是bug经常会有的地方，利用好预解析的特性可以解决很多问题，并且提高代码的质量及数量，浏览器在解析代码前会把变量的声明和函数(整个函数体)提前到当前作用域的最顶端。 细节问题:在多对的scr
-
本文向大家介绍js中toString()和String()区别详解，包括了js中toString()和String()区别详解的使用技巧和注意事项，需要的朋友参考一下 我们知道String()与 .toString()都是可以转换为字符串类型，但是String()与 .toString()的还是有区别的 1、.toString()可以将所有的的数据都转换为字符串，但是要排除null 和 undef
-
在Spring 3中，我在jsp的表单标签中看到了两种不同的属性 在这里，属性modelAttribute是表单对象的名称，其属性用于填充表单。我在发布表单时使用了它，在控制器中我使用了< code>@ModelAttribute来获取值，调用验证器，应用业务逻辑。这里一切都好。现在 这个属性所期望的是什么，它是否也是我们要填充其属性的表单对象？