script标签中defer和async有什么不同?

简介: script标签中defer和async有什么不同?

对比

我们可以在网址中经常看到script标签出现async以及defer的属性

e4098678461a494690c7ebd642cf2f93.png


   defer:script被异步加载后并不会⽴刻执⾏,而是要等到整个页面在内存中正常渲染结束后,才会执行。多 个 defer 脚本会按照它们在页面出现的顺序加载。


   async:同样是异步加载脚本,区别是脚本加载完毕后⽴即执⾏,这导致async属性下的脚本是乱序的,对于script有先后依赖关系的情况,并不适⽤。


我们可以参考MDN上关于 HTMLScriptElement 的描述:https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLScriptElement


053840da702145f6806a3aa2eac726bd.png




目录
相关文章
|
1月前
|
JavaScript 前端开发 Go
理解 <script> 标签的 defer 和 async 属性
理解 <script> 标签的 defer 和 async 属性
23 3
|
10月前
|
JavaScript 前端开发 Go
async vs defer 的区别
async vs defer 的区别
48 0
|
5月前
|
JSON JavaScript 前端开发
js中async的作用
js中async的作用
41 0
|
9月前
|
移动开发 Go UED
<script> 标签上的 defer 和 async 属性是什么?
它会执行以下步骤 1.暂停 HTML 文档解析器 2.创建新请求以下载脚本 3.在脚本完全下载后立即执行脚本 4.执行结束后,继续解析 HTML 文档
|
前端开发 JavaScript
JS循环中使用async、await的正确姿势
使用filter过滤item为vue或者react的选项
226 0
JS循环中使用async、await的正确姿势
|
JavaScript 前端开发 Go
让你轻松看懂defer和async
让你轻松看懂defer和async
|
JavaScript Go
script标签中的defer与async
script标签中的defer与async
script标签中的defer与async
|
前端开发 JavaScript
js回调函数--callback
js回调函数--callback