开发者社区> 技术小阿哥> 正文

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,它的加载和执行是紧紧挨着的,无论声明顺序如何,只要加载完成就立刻执行,它对于应用脚本用处不大,因为它完全不考虑依赖。



本文转自 风雨萧条 51CTO博客,原文链接:http://blog.51cto.com/1095221645/1914780,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
script标签中defer和async有什么不同?
script标签中defer和async有什么不同?
26 0
关于jQuery中toggle参数callback函数提前执行问题
关于jQuery中toggle参数callback函数提前执行问题
30 0
JS : attr()和prop()和is() 取值的区别
简单区别就是,attr操作HTML元素的属性,prop操作DOM元素的属性,因为DOM会解析某些HTML元素属性到自己身上,此时prop和attr都能操作这些属性。
66 0
JavaScript中的async/await的用法和理解
JavaScript中的async/await的用法和理解
101 0
script标签中的defer与async
script标签中的defer与async
94 0
【青训营】- Script标签中async和defer属性总结
【青训营】- Script标签中async和defer属性总结
92 0
Async、defer以及普通加载script区别详解
如果用一张图片诠释这几种script加载的特点,应该是这样的:
88 0
JavaScript加载 - defer与async
默认模式,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之后的所有文档内容之前,也就是说不等待后续载入的文档元素,读取到就加载并执行。async加载模式,加载和渲染后续文档元素的过程, script.
1588 0
+关注
技术小阿哥
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
Let's Work Together On The Future Of JavaScript Through TC39
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载