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




目录
相关文章
|
2月前
|
监控 JavaScript 前端开发
确定使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript
【10月更文挑战第24天】选择使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript 是一个需要综合考虑多个因素的决策。需要根据脚本之间的依赖关系、页面加载性能要求、脚本的功能和重要性等因素来进行权衡。在实际应用中,需要通过测试和验证来确定最适合的加载方式,以提供更好的用户体验和页面性能。
|
4月前
|
JavaScript 前端开发
一个js里可以有多少个async function,如何用最少的async function实现多个异步操作
在 JavaScript 中,可以通过多种方法实现多个异步操作并减少 `async` 函数的数量。
|
6月前
|
前端开发 JavaScript
js【详解】async await
js【详解】async await
44 0
|
8月前
|
JavaScript 前端开发 Go
理解 <script> 标签的 defer 和 async 属性
理解 <script> 标签的 defer 和 async 属性
179 3
|
JavaScript 前端开发 Go
async vs defer 的区别
async vs defer 的区别
82 0
|
前端开发 JavaScript
js - ASYNC/AWAIT
`async/await` 是一个 es7 的语法
|
移动开发 Go UED
<script> 标签上的 defer 和 async 属性是什么?
它会执行以下步骤 1.暂停 HTML 文档解析器 2.创建新请求以下载脚本 3.在脚本完全下载后立即执行脚本 4.执行结束后,继续解析 HTML 文档
|
前端开发 JavaScript
了解js中async-await
了解async异步函数如何使用并且使用中的注意点
189 0
了解js中async-await
|
前端开发 JavaScript
JS循环中使用async、await的正确姿势
使用filter过滤item为vue或者react的选项
295 0
JS循环中使用async、await的正确姿势

热门文章

最新文章