DDR爱好者之家

JS中script标签defer和async属性的区别详解
站长资源 2024/11/28 佚名
73 1538
DDR爱好者之家 Design By 杰米

向html页面中插入javascript代码的主要方法就是通过script标签。其中包括两种形式，第一种直接在script标签之间插入js代码，第二种即是通过src属性引入外部js文件。由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染，对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟，为了避免这个问题，建议把全部的js引用放在</body>标签之前。

　　script标签存在两个属性，defer和async，因此script标签的使用分为三种情况：

　　1.<script src="/UploadFiles/2021-04-02/example.js">

　　　没有defer或async属性，浏览器会立即加载并执行相应的脚本。也就是说在渲染script标签之后的文档之前，不等待后续加载的文档元素，读到就开始加载和执行，此举会阻塞后续文档的加载；

　　2.<script async src="/UploadFiles/2021-04-02/example.js">

　　 有了async属性，表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的，即异步执行；

　　3.<script defer src="/UploadFiles/2021-04-02/example.js">

有了defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本的执行需要等到文档所有元素解析完成之后，DOMContentLoaded事件触发执行之前。

　　下图可以直观的看出三者之间的区别:

JS中script标签defer和async属性的区别详解

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

　　从图中我们可以明确一下几点：

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

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

　　3.如果存在多个有defer属性的脚本，那么它们是按照加载顺序执行脚本的；而对于async，它的加载和执行是紧紧挨着的，无论声明顺序如何，只要加载完成就立刻执行，它对于应用脚本用处不大，因为它完全不考虑依赖。

小结：

defer 和 async 的共同点是都是可以并行加载JS文件，不会阻塞页面的加载，不同点是 defer的加载完成之后，JS会等待整个页面全部加载完成了再执行，而async是加载完成之后，会马上执行JS，所以假如对JS的执行有严格顺序的话，那么建议用 defer加载。

以上所述是小编给大家介绍的JS中script标签defer和async属性的区别详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米