script标签中defer属性和async属性

最新推荐文章于 2025-06-11 22:04:32 发布
最新推荐文章于 2025-06-11 22:04:32 发布
阅读量304 收藏 5
点赞数 10
CC 4.0 BY-SA版权
分类专栏： 前端面试 文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Demon_and_anger/article/details/146525956

浏览器在解析 HTML 的时候，如果遇到一个没有任何属性的 script 标签，就会暂停解析，先发送网络请求获取该 JS 脚本的代码内容，然后让 JS 引擎执行该代码，当代码执行完毕后恢复解析。

可以看到：script 阻塞了浏览器对 HTML 的解析，如果获取 JS 脚本的网络请求迟迟得不到响应，或者 JS 脚本执行时间过长，都会导致白屏，用户看不到页面内容。

defer属性和async属性都是用于控制javascript脚本的加载和执行时机。

在script标签设置async属性时，浏览器会在解析见面时过程中异步加载下载该脚本，立即执行。按照文件加载完成顺序。

请求该脚本的网络请求是异步的，不会阻塞浏览器解析 HTML，一旦网络请求回来之后，如果此时 HTML 还没有解析完，浏览器会暂停解析，先让 JS 引擎执行代码，执行完毕后再进行解析。

注意事项：只对外部脚本文件有效 对行内脚本无效。特点：异步下载 立即执行 

在script标签设置defer属性时，浏览器会在解析见面时过程中异步下载该脚本，但不会立即执行。等到页面解析完成后再脚本顺序执行。

当浏览器遇到带有 defer 属性的 script 时，获取该脚本的网络请求也是异步的，不会阻塞浏览器解析 HTML，一旦网络请求回来之后，如果此时 HTML 还没有解析完，浏览器不会暂停解析并执行 JS 代码，而是等待 HTML 解析完毕再执行 JS 代码

注意事项：只对外部脚本文件有效 对行内脚本无效。特点：异步下载 延迟执行 顺序执行

Script 标签中 async 和 defer 属性的作用分别是什么？
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-07 826
属性的工作原理及应用场景，我们可以更好地优化Web应用的性能，为用户提供更快的加载速度和更流畅的交互体验。在实际项目中，合理地利用这两种属性，可以显著改善页面加载效率，提高整体的用户体验。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。本文将深入探讨这两个属性的工作原理及其应用场景，旨在帮助前端开发者更好地理解并利用它们来提升网站性能。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，专栏系列（点击解锁）
面试官：说一下script 标签中 defer（推迟） 和 async（异步） 的区别
upgrade_bro的博客
08-14 4711
script 标签中 defer 和 async 的区别：“在解析HTML文档过程中，defer和async标注的脚本都会立即下载。不同的是……”
浅析script标签中的defer与async属性
01-21
一、前言 看到的前辈写的代码如下 [removed][removed] 竟然同时有async和defer属性，心想着肯定是前辈老司机的什么黑科技，两个一块儿肯定会发生什么神奇化学反应，于是赶紧怀着一颗崇敬的心去翻书翻文档，先复习一下各自的定义。 二、调查一番 先看看async和defer各自的定义吧，翻开红宝书望远镜，是这么介绍的 2.1 defer 这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行
script标签的defer和async及服务器渲染
wyzqhhhh的博客
01-15 1262
有时候，项目中也会采用混合的方式，称为“同构应用”（Isomorphic App），结合了服务器渲染和客户端渲染的优势。在实际项目中，有时候也会选择使用混合的方式，即同构应用（Isomorphic App），结合了服务器渲染和客户端渲染的优势，以满足项目的多样化需求。渲染树包含了需要在屏幕上渲染的所有可见元素，但它并不包括不可见的元素，比如中的元素。3.对于内容频繁变化： 如果项目中的内容需要频繁变化，但用户对于初始加载速度的要求较高，可以考虑使用 SSR，以保证页面的初始内容是即时可见的。
＜script＞ 标签的 async 与 defer 属性详解
最新发布
sinat_33255495的博客
06-11 325
使用 async 和 defer 属性的脚本都是异步加载的，都不会阻塞 HTML 文档的解析，但是他们的执行时机是不同的，下面来详细说明一下。
script标签的defer和async属性详解
weixin_45092437的博客
03-24 6760
对于普通脚本，如果设置该属性，那么该脚本将会并行加载，不阻碍HTML文档的解析，当加载完成后，如果此时文档还没解析完成，则会终止解析，先执行该脚本，执行结束后再继续解析；，浏览器会在文档解析的同时并行的加载这些脚本。如果脚本是内联的，浏览器会先去执行这段内联的脚本，如果是外链的，那么先会去加载脚本，然后再执行。事件的执行，去执行已经加载好的脚本信息，如果此时脚本还未加载完成，则会等待脚本加载完成后，再执行该脚本。，则该脚本不会阻碍文档的解析，只会在文档解析的同时去加载脚本信息，当文档解析完成后，暂时阻止。
JS中script标签defer和async属性的区别
StarFishing
11-30 4848
向html页面中插入javascript代码的主要方法就是通过script标签。其中包括两种形式，第一种直接在script标签之间插入js代码，第二种即是通过src属性引入外部js文件。由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染，对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟，为了避免这个问题，建议把全部的js引用放在标签之前。 script标签存在两个属性，def...
script标签以及defer和async属性
weixin_42576837的博客
05-15 1421
async属性也只适用于外部脚本，浏览器同样会立即下载脚本，但是与defer不同的是，async的脚本不能保证按照它们出现的次序执行，而且当该脚本下载完成后就会立即执行该脚本。标签时，首先开始下载脚本，从脚本开始下载到脚本完成执行，整个过程中，HTML的解析都是停止的。可以发现，对于async的脚本，脚本下载时，HTML仍然在解析，但是与defer不同的是，当脚本下载完成后立即就会执行脚本。可以发现，对于defer的脚本，脚本下载时，HTML仍然在解析，当HTML解析完成以后，开始执行脚本，即延迟执行。
JS中script标签defer和async属性的区别详解
11-26
在JavaScript的世界里，`<script>`标签是引入和执行脚本的关键。为了优化网页加载性能，HTML5引入了两个重要属性：`defer`和`async`。这些属性为开发者提供了更多的控制，使得JavaScript的加载和执行更加灵活，避免...
defer和async属性在script标签中的使用
weixin_51349592的博客
03-28 1475
浏览器在解析HTML的过程中，遇到了script元素的默认行为以及defer和async属性在script标签中的作用
script标签中的defer和async
qq_43186285的博客
08-18 275
浅谈script标签中的async和defer script 标签用于执行和加载脚本，直接使用script 脚本的话，html 会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的DOM渲染 script 提供了两种方式来解决上述问题，async 和 defer , 这两个属性使得 script 都不会阻塞 DOM 的渲染 defer 如果 script 标签设置了该属性，则浏览器会异步的下载该文件并且不会影响到后续DOM的渲染，如果有多个设置了defer的script标签存在，
script标签上的defer及async属性
yiyueqinghui的博客
07-09 1106
1、script标签上的defer及async属性 Async：异步加载这个文件。表示应该立即下载脚本，但不应妨碍页面中的其他操作，只对外部脚本文件有效。 Defer: 延迟加载这个文件。标识脚本可以延迟到在html解析完后才执行。只对外部脚本文件有效。 当script上有defer或async属性时，script的下载时均不会阻塞html的解析，但是一旦含有async属性的脚本被下载完，它就会立即执行，执行时会阻塞html的解析，而含有defer属性的脚本则是在html解析完后（DOMContent
js的[defer]和[async]属性
10-25
主要介绍了js的[removed]的[defer]和[async]属性,需要的朋友可以参考下
script标签中的defer和async属性
weixin_56266471的博客
08-01 474
默认情况下，浏览器是同步加载JavaScript脚本，即渲染引擎遇到标签就会停下来，等到执行完脚本，再继续向下渲染。如果是外部脚本，还必须加入脚本下载的时间。如果脚本体积很大，下载和执行的时间就会很长，因此造成浏览器堵塞，用户会感觉到浏览器“卡死”了，没有任何响应。这显然是很不好的体验，所以浏览器允许脚本异步加载，下面就是两种异步加载的语法。上面代码中，标签打开defer或async属性，脚本就会异步加载。...
Script标签中 defer 和 async 属性的区别
法研鲁迅的个人博客
03-07 526
defer ：异步加载。直到文档解析完成才会执行，保证执行顺序。async ：异步加载。不阻塞文档解析，执行时间不确定，不保证执行顺序。
defer和async的区别
weixin_34342992的博客
12-09 321
先来试个一句话解释仨，当浏览器碰到 script 脚本的时候： &lt;script src="script.js"&gt;&lt;/script&gt; 没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。 &lt;script async sr...
＜script＞标签的async和defer属性
qq_54140719的博客
09-22 2839
1、async：表示应该立即开始下载脚本，但不能阻止其他的页面动作，比如下载资源或等待其他脚本加载。只对外部脚本文件有效。 2、defer：表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。(在IE7及更早的版本中，在行内脚本也可以指定这个属性)。
你不知道的 script 标签的 defer 与 async 属性
u012384510的博客
10-26 577
我持续组织了近一年的源码共读活动，感兴趣的可以点此扫码加我微信ruochuan12参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》包含20余篇源码文章。历史面试系列。另外：目前建有江西|湖南|湖北籍前端群，可加我微信进群。前言在面试的时候，经常会遇到一道经典的面试题：如何优化网页加载速度？常规的回答中总会有一条：把 css 文件放在页面顶部...
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、付费专栏及课程。

余额充值