script标签的defer和async ---总结

async 与 defer 的差别


  • async 和 defer 标注的 script 都不会暂停HTML解析就立刻被下载,两者都支持onload事件回调来解决需要该脚本来执行的初始化。
  • 两者的区别在于执行时的不同:async 脚本在script文件下载完成后会立即执行,并且其执行时间一定在 window的load事件触发之前。这意味着多个async脚本很可能不会按其在页面中的出现次序顺序执行。
    与此相对,浏览器确保多个 defer 脚本按其在HTML页面中的出现顺序依次执行,且执行时机为DOM解析完成后,document的DOMContentLoaded 事件触发之前。

defer:

这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕后再运行。因此,在script元素中设置defer属性,相当于告诉浏览器立即下载,但延迟执行
HTML5规范要求脚本按照它们出现的先后顺序执行,因此第一个延迟脚本会先于第二个延迟脚本执行,而这两个脚本会先于DOMContentLoaded事件执行。在现实当中,延迟脚本并不一定会按照顺序执行,也不一定会在DOMContentLoad时间触发前执行,因此最好只包含一个延迟脚本。

async:

这个属性与defer类似,都用于改变处理脚本的行为。同样与defer类似,async只适用于外部脚本文件,并告诉浏览器立即下载文件。但与defer不同的是,标记为async的脚本并不保证按照它们的先后顺序执行。

第二个脚本文件可能会在第一个脚本文件之前执行。因此确保两者之间互不依赖非常重要。指定async属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容。

一句话解释,当浏览器碰到 script 脚本的时候:
<script src="script.js"></script>
1 没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。
2 有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。
3 有 defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。


                                            ------- segmentfault
### HTML `script` 标签中 `defer` 与 `async` 属性的区别及用法 #### 基本定义 在 JavaScript 中,`<script>` 标签用于引入外部 JavaScript 文件或包含嵌入式 JavaScript 代码。为了优化页面加载性能并控制脚本的执行时机,HTML 提供了两种特殊的属性——`defer` `async`。 #### `defer` 属性 当 `<script>` 标签带有 `defer` 属性时,浏览器会继续解析渲染后续的文档内容,而不会阻塞 DOM 构建过程[^3]。脚本会在整个 HTML 文档解析完成后立即按顺序执行,这意味着如果页面中有多个带有 `defer` 属性的脚本,则它们会按照其在 HTML 中出现的顺序依次执行[^5]。 以下是使用 `defer` 的示例代码: ```html <script src="script1.js" defer></script> <script src="script2.js" defer></script> ``` #### `async` 属性 对于具有 `async` 属性的 `<script>` 标签,浏览器同样不会因为下载该脚本文件而停止解析其他部分的内容[^4]。然而,一旦脚本被成功获取回来之后就会立刻被执行,而不等待任何其他的资源或者操作完成。需要注意的是,这种行为可能导致不同脚本之间的执行次序变得不可预测,具体取决于各个请求返回的速度差异。 下面是一个简单的例子展示了如何应用 `async` 属性: ```html <script src="library.js" async></script> <script src="app.js"></script> <!-- 这里可能还未等到 library.js 加载完毕 --> ``` #### 主要对比 | 特性 | `normal (no attribute)` | `defer` | `async` | |-----------------|-------------------------------|----------------------------------|---------------------------------| | **下载阶段** | 阻挡DOM构建 | 并行下载 | 并行下载 | | **执行阶段** | 按照遇到的位置暂停解析直到运行完当前脚本 | 在DOMContentLoaded事件触发前依序执行 | 尽早尽可能快地单独执行 | 总结来说,在实际开发过程中可以根据需求选择合适的策略来提升网页的整体表现力。例如,如果你希望某些非关键性的第三方统计工具尽快发挥作用但又不影响主要业务逻辑的话,那么就可以采用 `async` 方式;而对于那些需要确保特定先后关系才能正常运作的部分则更适合运用 `defer` 技术[^1]。 ### 结论 通过上述分析可以看出,虽然两者都能实现异步加载效果从而改善首屏呈现速度等方面的优势,但是由于各自独特的特性决定了适用场景也有所不同。因此理解清楚两者的本质区别是非常重要的。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值