当前位置:首页 > 前端 > 正文内容

script中defer和async区别

放牧的风2年前 (2021-05-25)前端1194

主要记录下defer和async的区别:
在没有defer或者async的情况下,会立即执行脚本,所以通常建议把script放在body最后

<script src="script.js"></script>

有async的话,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。
但是多个js文件的加载顺序不会按照书写顺序进行

<script async src="script.js"></script>
有derer的话,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成,并且多个defer会按照顺序进行加载。
<script defer src="script.js"></script>

upload-images.jianshu.io_upload_images_14923653-87958743cae248f5.png_imageMogr2_auto-orient_strip_imageView2_2_w_688_format_webp.png

所以区别主要在于一个执行时间,defer会在文档解析完之后执行,并且多个defer会按照顺序执行,而async则是在js加载好之后就会执行,并且多个async,哪个加载好就执行哪个

扫描二维码推送至手机访问。

版权声明:本文由放牧的风发布,如需转载请注明出处。

本文链接:https://grazingwind.com/post/62.html

分享给朋友:

相关文章

用webstorm在chrome 调试页面时一直弹出 copy authorization url to clipboard

用webstorm在chrome 调试页面时一直弹出 copy authorization url to clipboard

用chrome来调试页面,每次刷新会弹出 requested without authorization,是因为更新后的bug,可以在Setting - debugger中设置 ...

webstorm中用npm运行任务(即显示npm面板)

webstorm中用npm运行任务(即显示npm面板)

第一步右击package.json文件,点击show npm Scripts第二步出现npm面板第三步点击即可运行任务  ...

JavaScript for...of与for...in的区别

无论是for…in还是for…of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。for…in 语句以原始插入顺序迭代对象的可枚举属性。for…of 语句遍历可迭代对象定义要迭代的数据。以下示例显示了与Array一起使用时,fo...

浏览器同源政策及其规避方法

浏览器同源政策及其规避方法

浏览器安全的基石是"同源政策"(same-origin policy)。很多开发者都知道这一点,但了解得不全面。本文详细介绍"同源政策"的各个方面,以及如何规避它。一、概述1.1 含义1995年,同源...

跨域资源共享 CORS 详解

CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。本文详...

JavaScript内存管理和垃圾回收机制

像C语言这样的底层语言一般都有底层的内存管理接口,比如 malloc()和free()。相反,JavaScript是在创建变量(对象,字符串等)时自动进行了分配内存,并且在不使用它们时“自动”释放。 释放的过程称为垃圾回收。这个“...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。