面试题：script标签中 defer（延迟）和 async（异步） 有啥区别？（他们只对外部脚本有效）

已于 2024-06-17 22:09:20 修改
阅读量124 收藏
点赞数 3
文章标签： javascript
于 2024-06-17 22:07:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zss_base/article/details/139755807
版权

defer脚本即使下载完成，也会被延迟到整个页面都解析完毕后再运行，运行结束后触发DOMContentLoaded事件。”

“而async脚本下载完成后立即执行，可能会在 DOMContentLoaded之前或之后，保证在页面的 load 事件前执行

Lucky_zss
关注
【吐血整理】阿里前端面试题总结（1）【超全超细带答案！！】
10-12
- async和defer都是用来异步加载脚本的方式，但async会在下载完毕后立即执行，而defer会在文档解析完毕后执行。 - 文档的预解析是浏览器在后台对即将访问的链接进行预取，以加速页面加载。 - CSS可以通过阻塞渲染...
面试官：说一下script 标签中 defer（推迟） 和 async（异步） 的区别
upgrade_bro的博客
08-14 4465
script 标签中 defer 和 async 的区别：“在解析HTML文档过程中，defer和async标注的脚本都会立即下载。不同的是……”
script 标签async（异步） 和 defer（推迟 的区别
weixin_44616890的博客
05-18 169
async：他是异步加载，不确定何时会加载好；页面加载时，带有 async 的脚本也同时加载，加载好后会立即执行，如果有一些需要操作 DOM 的脚本加载比较慢时，这样会造成 DOM 还没有加载好，脚本就进行操作，会造成错误。defer：页面加载时，带有 defer 的脚本也同时加载，加载后会等待 页面加载好后，才执行。script 标签有2个属性 async（异步） 和 defer（推迟）；
Golang defer延迟语句详解
hcraM41的博客
07-21 1454
在defer函数定义时，对外部变量的引用有三种方式：值传参、指针传参、闭包引用。从返回值出发来拆解延迟语句defer。return xxx。这条语句经过编译之后，实际上生成了三条指令：1.返回值 = xxx。2.调用 defer 函数。3.空的 return。其中，1和3是return语句生成的指令，2是defer语句生成的指令。可以看出：return并不是一条原子指令；defer语句在第二步调用，这里可能操作返回值，从而影响最终结果。
延迟脚本（defer）和异步脚本（async）的区别和联系
weixin_45013926的博客
07-25 574
延迟脚本和异步脚本都是都是JavaScript中<script>标签的属性。 由于JavaScript是单线程的，解析器在解析程序时，遇到<script>标签就会暂停解析文档，将控制权交给js引擎来下载（如果需要的话）或执行js文件。如果js文件过大或所用的时间过长就会导致浏览器的渲染时间过长，会严重影响用户体验，这当然是我们不想看到的，谁会喜欢一个反应特别慢的网站呢。因...
script元素中defer推迟脚本执行
悄悄quite
05-08 678
defer属性是在告诉浏览器要等整个页面载入之后，解析完毕才执行该<script…/>元素的脚本 没有defer的时候 <! DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <t...
5月最新大厂前端高频核心面试题.pdf
06-03
8. <script>标签的defer和async属性都可以让脚本异步加载，但async是完全异步加载并在加载完毕后立即执行，而defer则是等整个文档解析完毕后按照在文档中出现的顺序执行。 9. data-属性用于存储页面的自定义数据，...
前端大厂最新面试题-2020跟谁学前端社招面经.docx
06-06
2. script 标签 defer 和 async 的区别：defer 和 async 都是 script 标签的属性，用于控制 JavaScript 文件的加载和执行顺序。defer 属性规定脚本在文档完成解析后执行，而 async 属性规定脚本在下载完成后执行，...
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
weixin_52173250的博客
10-30 1016
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
基于vue框架的的汇生活家居商城的设计与实现bdjlq（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
10-29 1253
项目功能：商品分类,商品信息,用户。
JavaScript中this的指向和改变this指向的方法 - 2024最新版前端秋招面试短期突击面试题【100道】
everfoot的博客
10-29 636
了解this的工作原理是掌握JavaScript的关键之一，特别是在编写复杂的应用程序时。正确使用this可以避免许多常见的问题和错误。在实际开发中，合理选择不同的绑定方法，可以让你的代码更加灵活和易于维护。掌握这些this的知识点将帮助你在前端面试中脱颖而出！祝你顺利上岸！
echarts 遍历多个图表，并添加resize缩放
licongmingli的博客
10-30 213
遍历echarst多个图表，并添加独立的缩放函数
Vue3用户关注与粉丝列表展示
m0_74963840的博客
10-27 634
粉丝列表小组件
ssm智慧社区电子商务系统+vue
weixin_44832324的博客
10-28 1230
系统能否进行正常工作，功能模块能否实现，程序代码是否有错误，这些都需要通过系统测试来进行判断，测试是程序开发中必不可少的步骤，就算系统一步不差的被开发出来了，但进行测试时总能发现一个之前从没遇到过的问题[26]。在系统开发的整个过程当中都需要不断进行系统测试，根据经验发现，前期的一个小问题，将会酿成后期的一个大问题，所以越早发现，越早解决，才能保证后续的编码、测试和设计能够顺利进行。目前，系统测试所使用的方法主要是黑盒测试，系统测试的目的包括：根据客户的需求来设计用户界面；
ThreeJs 中如何实现动画效果
qq_34820371的博客
10-28 527
在 ThreeJs 中实现基础的动画效果非常简单。通过使用 requestAnimationFrame 创建渲染循环，你可以轻松实现物体的旋转、位置变化和其他动画效果。掌握这些基础知识后，你可以进一步探索更复杂的动画技术，例如利用 Tween.js 进行平滑过渡，或结合物理引擎实现逼真的物理动画。
JavaScript的第十一天
全栈学习ing
10-31 554
在使用offset系列时需注意该属性为css属性，一般用于和javascript结合使用来获取信息，所以在使用该属性时只能获取值而不能改变值。最近的具有定位属性的祖先元素顶部边缘左侧边缘。
腾旭地图显示多个位置，点击弹出位置信息
m0_58047199的博客
10-31 171
center: new window.TMap.LatLng(longitude.value, latitude.value), //设置地图中心点坐标。rotation: 0 //设置地图旋转角度。zoom: 11, //设置地图缩放级别。pitch: 43.5, //设置俯仰角。
鸿蒙ArkTS中的面向对象编程
最新发布
dawn0718的专栏
10-31 256
ArkTS作为一门面向对象语言，了解和掌握它的面向对象（封装、继承、多态）、面向接口、面向抽象的知识很有必要。
腾讯前端面试经典题解析：字符串处理与异步加载
面试题中的 `loadScript()` 函数演示了如何动态创建 `<script>` 元素并插入到 DOM 中以加载外部脚本。这个函数利用了 `onreadystatechange` 和 `onload` 事件来处理脚本加载完成后的回调，确保脚本加载成功后执行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值