JS中script标签defer和async属性的区别

本文详细介绍了在HTML页面中插入JavaScript代码的三种主要方法:直接插入JS代码、使用async属性实现异步加载和执行、使用defer属性实现加载完成后执行。探讨了这三种方法在网络加载时间和脚本执行时间上的差异,以及它们对页面渲染的影响。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

向html页面中插入javascript代码的主要方法就是通过script标签。其中包括两种形式,第一种直接在script标签之间插入js代码,第二种即是通过src属性引入外部js文件。由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染,对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟,为了避免这个问题,建议把全部的js引用放在标签之前。

script标签存在两个属性,defer和async,因此script标签的使用分为三种情况:

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

没有defer或async属性,浏览器会立即加载并执行相应的脚本。也就是说在渲染script标签之后的文档之前,不等待后续加载的文档元素,读到就开始加载和执行,此举会阻塞后续文档的加载;

2.<script async src="example.js"></script>

有了async属性,表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的,即异步执行;

3.<script defer src="example.js"></script>

有了defer属性,加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步),js脚本的执行需要等到文档所有元素解析完成之后,DOMContentLoaded事件触发执行之前。

下图可以直观的看出三者之间的区别:

img

其中蓝色代表js脚本网络加载时间,红色代表js脚本执行时间,绿色代表html解析。

从图中我们可以明确一下几点:

1.defer和async在网络加载过程是一致的,都是异步执行的;

2.两者的区别在于脚本加载完成之后何时执行,可以看出defer更符合大多数场景对应用脚本加载和执行的要求;

3.如果存在多个有defer属性的脚本,那么它们是按照加载顺序执行脚本的;而对于async,它的加载和执行是紧紧挨着的,无论声明顺序如何,只要加载完成就立刻执行,它对于应用脚本用处不大,因为它完全不考虑依赖。

小结:

defer 和 async 的共同点是都是可以并行加载JS文件,不会阻塞页面的加载,不同点是 defer的加载完成之后,JS会等待整个页面全部加载完成了再执行,而async是加载完成之后,会马上执行JS,所以假如对JS的执行有严格顺序的话,那么建议用 defer加载。

### 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]。 ### 结论 通过上述分析可以看出,虽然两者都能实现异步加载效果从而改善首屏呈现速度等方面的优势,但是由于各自独特的特性决定了适用场景也有所不同。因此理解清楚两者的本质区别是非常重要的。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值