script标签属性defer和async的作用

最新推荐文章于 2025-02-12 13:56:17 发布
最新推荐文章于 2025-02-12 13:56:17 发布
阅读量429 收藏
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yyychocolate/article/details/108252603
版权

在<script>元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。

HTML5规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于DOMContentLoaded事件执行。在现实当中，延迟脚本并不一定会按照顺序执行，也不一定会在DOMContentLoad时间触发前执行，因此最好只包含一个延迟脚本。

async只适用于外部脚本文件，并告诉浏览器立即下载文件。并不保证按照它们的先后顺序执行。第二个脚本文件可能会在第一个脚本文件之前执行。因此确保两者之间互不依赖非常重要。指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。


一个普通的<script>标签的加载和解析都是同步的，会阻塞DOM的渲染，这也就是我们经常会把<script>写在<body>底部的原因之一，为了防止加载资源而导致的长时间的白屏，另一个原因是js可能会进行DOM操作，所以要在DOM全部渲染完后再执行。

1.defer和async在网络加载过程是一致的，都是异步执行的；
2.两者的区别在于脚本加载完成之后何时执行，可以看出defer更符合大多数场景对应用脚本加载和执行的要求；
3.如果存在多个有defer属性的脚本，那么它们是按照加载顺序执行脚本的；而对于async，它的加载和执行是紧紧挨着的，无论声明顺序如何，只要加载完成就立刻执行，它对于应用脚本用处不大，因为它完全不考虑依赖。

Script 标签中 async 和 defer 属性的作用分别是什么？
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-07 792
属性的工作原理及应用场景，我们可以更好地优化Web应用的性能，为用户提供更快的加载速度和更流畅的交互体验。在实际项目中，合理地利用这两种属性，可以显著改善页面加载效率，提高整体的用户体验。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。本文将深入探讨这两个属性的工作原理及其应用场景，旨在帮助前端开发者更好地理解并利用它们来提升网站性能。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，专栏系列（点击解锁）
defer和async属性在script标签中分别有什么作用？
My_railgun的博客
01-11 849
基于coderwhy老师的课程笔记整理1、不使用属性时的问题浏览器在解析HTML的过程中，遇到script元素时，会停止继续构建DOM树，首先下载JavaScript代码并执行JavaScript的脚本。脚本执行结束后，才会继续解析HTML，构建DOM树。这样做的原因是：JavaScript的作⽤之⼀就是操作并且修改DOM；如果等到DOM树构建并且渲染完成再执⾏JavaScript，会造成严重的回流和重绘，影响⻚⾯的性能；
script标签中的async和defer的作用
weixin_43956521的博客
09-24 256
defer 如果script标签设置了该属性，则浏览器会异步的下载该文件并且不会影响到后续DOM的渲染； 如果有多个设置了defer的script标签存在，则会按照顺序执行所有的script； defer脚本会在文档渲染完毕后，DOMContentLoaded事件调用前执行。 文档解析时，遇到设置了defer的脚本，就会在后台进行下载，但是并不会阻止文档的渲染，当页面解析&渲染完毕后。 会等到所有的defer脚本加载完毕并按照顺序执行，执行完毕后会触发DOMContentLoaded事件。 asyn
script 标签中async 属性和defer 属性作用以及区别？
weixin_33670786的博客
04-17 345
接下来我们对比下 defer 和 async 属性的区别： 其中蓝色线代表JavaScript加载；红色线代表JavaScript执行；绿色线代表 HTML 解析。 1）情况1 <scriptsrc="script.js"> 没有 defer 或 async，浏览器会立即加载并执行指定的脚本，也就是说不等待后续载入的文档元素，读到就加载并执行。 2）情况2 (异步下载) a...
defer与async在＜script＞标签上的作用
m0_68117827的博客
09-04 160
defer与async在标签上的作用
script标签async和defer的区别及作用
dc1339485的博客
04-30 399
作用： 1.没有 defer 或 async，浏览器会立即加载并执行指定的脚本，也就是说不等待后续载入的文档元素，读到就加载并执行。 2.async 属性表示异步执行引入的 JavaScript，与 defer 的区别在于，如果已经加载好，就会开始执行——无论此刻是 HTML 解析阶段还是 DOMContentLoaded 触发之后。需要注意的是，这种方式加载的 JavaScript...
script标签的async属性是用来异步加载
hao_fe的专栏
03-31 950
一般的script标签（不带async等属性）加载时会阻塞浏览器，也就是说，浏览器在下载或执行该js代码块时，后面的标签不会被解析，例如在head中添加一个script，但这个script下载时网络不稳定，很长时间没有下载完成对应的js文件，那么浏览器此时一直等待这个js文件下载，此时页面不会被渲染，用户看到的就是白屏（网页文件已下载好，但浏览器不解析） 而使用async属性，浏览器会下载js文件
JS中script标签defer和async属性的区别详解
11-26
值得注意的是，`defer`和`async`属性只适用于外部脚本（即使用`src`属性指定的脚本），而不适用于内联脚本。 总的来说，`defer`和`async`是JavaScript加载策略的重要组成部分，它们帮助开发者平衡脚本执行和页面...
浅析script标签中的defer与async属性
01-21
竟然同时有async和defer属性，心想着肯定是前辈老司机的什么黑科技，两个一块儿肯定会发生什么神奇化学反应，于是赶紧怀着一颗崇敬的心去翻书翻文档，先复习一下各自的定义。 二、调查一番 先看看async和defer各自...
async与defer的作用与区别以及阻塞优化
weixin_34356310的博客
05-05 244
2019独角兽企业重金招聘Python工程师标准>>> ...
script标签的defer和async属性详解
weixin_45092437的博客
03-24 6668
对于普通脚本，如果设置该属性，那么该脚本将会并行加载，不阻碍HTML文档的解析，当加载完成后，如果此时文档还没解析完成，则会终止解析，先执行该脚本，执行结束后再继续解析；，浏览器会在文档解析的同时并行的加载这些脚本。如果脚本是内联的，浏览器会先去执行这段内联的脚本，如果是外链的，那么先会去加载脚本，然后再执行。事件的执行，去执行已经加载好的脚本信息，如果此时脚本还未加载完成，则会等待脚本加载完成后，再执行该脚本。，则该脚本不会阻碍文档的解析，只会在文档解析的同时去加载脚本信息，当文档解析完成后，暂时阻止。
script 标签中， async 和 defer 两个属性有什么用途和区别？
qq_38822390的博客
02-12 361
特性asyncdefer加载方式异步加载异步加载执行时机下载完成后立即执行文档解析完成后执行执行顺序不保证顺序按照文档中的顺序执行适用场景独立脚本（如分析、广告等）依赖于 DOM 的脚本使用async属性可以提高页面加载性能，适用于不依赖于其他脚本的情况。使用defer属性可以确保脚本在 DOM 完全加载后执行，适用于依赖 DOM 的脚本。根据具体需求选择合适的属性，可以有效优化网页的加载速度和用户体验。
浅谈script标签中的async和defer
weixin_33849942的博客
10-17 323
script标签用于加载脚本与执行脚本，在前端开发中可以说是非常重要的标签了。直接使用script脚本的话，html会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的DOM渲染。 现在大家习惯于在页面中引用各种的第三方脚本，如果第三方服务商出现了一些小问题，比如延迟之类的，就会使得页面白屏。好在script提供了两种方式...
script 标签 type=‘module‘ defer async的作用
黄彪博客
09-02 4269
文章目录文章参考script 标签的行为默认行为（无任何修饰）<script async ><script defer ><script type="module" ><script type ="module"><script type ="module" async>案例 文章参考 在浏览器中使用JavaScript module(模块) script 标签的行为 默认行为（无任何修饰） 浏览器会立即加载并执行指定的脚本 会阻塞 HTM
JavaScript | script 标签的 async 和 defer 的作用和区别
weixin_44589540的博客
07-11 728
async 和 defer 的作用 async 和 defer 是为了解决脚本阻塞问题提出的两种解决方案。为什么要脚本阻塞呢？这里的脚本指的是 JS 脚本。HTML 元素是按其在页面中出现的次序调用的，如果用 JavaScript 来管理页面上的元素（更精确的说法是使用 文档对象模型 DOM），若 JavaScript 加载于欲操作的 HTML 元素之前，则代码将出错。 async 和 defer 的区别 浏览器遇到 async 脚本时不会阻塞页面渲染，而是直接下载然后运行。这样脚本的运行次序就无法控制，只
＜script＞标签中defer和async的作用和区别
m0_56201092的博客
01-09 1502
但是script文件的执行是同步的，执行的过程仍然会阻塞html的解析渲染。4.async 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的。和async一样，script引用的外部文件是异步加载的，但是defer会将外部文件的执行推迟到html解析结束后再执行。3.对async而言，脚本的加载和执行是紧挨着的，不管声明顺序如何，只要加载完就会立即执行。，创建新的网络连接，并开始下载样式文件和脚本文件；
script标签中的defer和async
chenrongwei92的博客
10-10 9539
普通script: 文档解析的过程中，如果遇到script脚本,停止页面的解析渲染, 下载script脚本。 如果是多个script脚本, 近似于同时并行下载script脚本。 不论script脚本哪个先下载好, 都按照html中的先后顺序依此执行。 即如果后面的script脚本先下载好, 要等前面的script脚本下载好并执行后, 才能执行。 执行script脚本时, 也是停止页面的解析渲染。 执行完script脚本, 继续页面的解析渲染。 执行完script脚本和页面解析渲染完, 才会...
详解defer和async的原理及应用
热门推荐
LiuHe
05-03 2万+
defer和async是script标签的两个属性，用于在不阻塞页面文档解析的前提下，控制脚本的下载和执行。 在介绍他们之前，我们有必要先了解一下页面的加载和渲染过程： 1. 浏览器通过HTTP协议请求服务器，获取HMTL文档并开始从上到下解析，构建DOM； 2. 在构建DOM过程中，如果遇到外联的样式声明和脚本声明，则暂停文档解析，创建新的网络连接，并开始下载样式文件和脚本文件； 3. 样
script标签中的defer和async属性
瓜冬瓜的博客
01-20 6526
&lt;script&gt;标签中的defer属性和async属性的区别 无论&lt;script&gt;标签是嵌入代码还是引用外部文件，只要不包含defer属性和async属性（这两个属性只对外部文件有效），浏览器会按照&lt;script&gt;的出现顺序对他们依次进行解析，也就是说，只有在第一个&lt;script&gt;中的代码执行完成之后，浏览器才会执行第二个&lt;script&gt;...
script 标签中 defer 和 async 区别？
最新发布
03-21
### 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、付费专栏及课程。

余额充值