JavaScript中script元素的async和defer属性

最新推荐文章于 2025-06-11 22:04:32 发布
原创 最新推荐文章于 2025-06-11 22:04:32 发布 · 612 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入探讨了HTML中script标签的三种加载方式：默认、async及defer，详细阐述了它们对页面渲染流程的影响，以及如何优化脚本加载以提升网页性能。

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

先来试个一句话解释仨，当浏览器碰到 script 脚本的时候：

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

没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行，HTML暂停。

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

有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。HTML元素与.js加载并行，.js执行时候HTML元素暂停

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

有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。HTML元素与.js加载并行，.js等HTML元素执行完后再执行

async和defer只对外部脚本文件有效。

配合下面图进行理解：
在这里插入图片描述
参考文章：
https://segmentfault.com/q/1010000000640869
https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

深入理解HTML中的script defer属性
软考鸭
08-22 836
在Web开发中，标签用于在HTML文档中嵌入或引用JavaScript代码。为了提升页面加载性能，开发者通常会采用一些策略来优化脚本的加载和执行方式。其中，defer属性就是一个经常被用来改善页面加载性能的重要属性。本文将深入探讨defer属性的工作原理、使用场景以及它如何帮助提升Web应用的性能。
Script 标签中 async 和 defer 属性的作用分别是什么？
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-07 841
属性的工作原理及应用场景，我们可以更好地优化Web应用的性能，为用户提供更快的加载速度和更流畅的交互体验。在实际项目中，合理地利用这两种属性，可以显著改善页面加载效率，提高整体的用户体验。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。本文将深入探讨这两个属性的工作原理及其应用场景，旨在帮助前端开发者更好地理解并利用它们来提升网站性能。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，专栏系列（点击解锁）
＜script＞标签的async和defer属性
qq_54140719的博客
09-22 2858
1、async：表示应该立即开始下载脚本，但不能阻止其他的页面动作，比如下载资源或等待其他脚本加载。只对外部脚本文件有效。 2、defer：表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。(在IE7及更早的版本中，在行内脚本也可以指定这个属性)。
＜script＞ 标签的 async 与 defer 属性详解
最新发布
sinat_33255495的博客
06-11 435
使用 async 和 defer 属性的脚本都是异步加载的，都不会阻塞 HTML 文档的解析，但是他们的执行时机是不同的，下面来详细说明一下。
JS中的defer属性和async属性
m0_47013706的博客
04-22 1275
JS中的defer属性和async属性
浅析script元素的的defer属性
victor_yjx的博客
02-20 326
html代码 js代码 html引用defer.js位置 执行结果 原因：当加载js文件的时候，html页面还没有加载完毕 解决方案：1、把js文件放到<body></body>里面 2、在引用js的头部加上defer ...
理解script标签中的defer和async属性
你若盛开，清风自来
06-15 813
本文将介绍script标签中的defer和async属性的区别，以及它们如何影响网页的加载性能。通过理解这些属性，开发者可以更好地控制JavaScript文件的加载顺序，提高网页的加载速度和用户体验。本文介绍了script标签中的defer和async属性的区别，以及它们如何影响网页的加载性能。通过理解这些属性，开发者可以更好地控制JavaScript文件的加载顺序，提高网页的加载速度和用户体验。
HTML5 script元素async、defer异步加载使用介绍
09-28
HTML5的`<script>`元素引入了两个重要的属性：`async`和`defer`，这两个属性主要用于异步加载JavaScript文件，以减少页面加载时的阻塞，提高用户体验。在过去，开发者通常需要通过复杂的JavaScript技巧来实现类似的...
JS中script标签defer和async属性的区别详解
11-26
总的来说，`defer`和`async`是JavaScript加载策略的重要组成部分，它们帮助开发者平衡脚本执行和页面渲染之间的关系，提高网页加载速度和用户体验。了解和合理运用这两个属性，是优化前端性能、提升网站质量的关键...
JS script脚本中async和defer区别详解
10-15
在JavaScript的世界里，`async` 和 `defer` 是两个在`<script>`标签中用于控制脚本加载和执行方式的关键属性。它们主要用来解决脚本阻塞页面渲染的问题，确保网页的加载性能和用户体验。下面将详细讲解这两个属性的...
JavaScript 高级程序设计第三版（二） script标签中的6个 属性async,charset,defer,language,src,type
丿灬安之若死
03-08 446
向 HTML 页面中插入 JavaScript 的主要方法，就是使用&lt;script&gt;元素。这个元素由 Netscape 创造 并在 Netscape Navigator 2 中首先实现。后来，这个元素被加入到正式的 HTML 规范中。HTML 4.01 为 &lt;script&gt;定义了下列 6 个属性。 async：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下...
Javascript中的defer属性和async属性的用法
落日夕霞的博客
05-15 1064
为什么需要异步加载js文件： 阻塞其他资源的下载，导致空白页面。 （1）置于顶部的js脚本，浏览器在执行时需要花费时间去下载外链文件的代码并执行，此时会导致明显的延迟，显示为空白页面，用户无法浏览内容，也无法与页面进行交互。 （2）虽然IE8、Firefox3.5、Safari4、Chrome2都允许并行下载Javascript文件，脚本的下载过程不会互相影响，但页面的加载仍旧需要等到所有的...
前端每日一练：script 标签的 async 和 defer 属性详解；DOMContentLoaded 事件详解
SAXX2的博客
03-12 710
前端每日一练：script 标签的 async 和 defer 属性详解；DOMContentLoaded 事件详解；在Web开发中，通过 标签引入 JavaScript 文件是一种常见的方式。但是，有时候我们希望脚本的加载和执行不会阻塞页面的渲染，这时就可以使用 async 和 defer 属性。本文将详细探讨这两个属性的区别以及它们在实际应用中的使用场景。
script标签的defer和async属性详解
weixin_45092437的博客
03-24 6789
对于普通脚本，如果设置该属性，那么该脚本将会并行加载，不阻碍HTML文档的解析，当加载完成后，如果此时文档还没解析完成，则会终止解析，先执行该脚本，执行结束后再继续解析；，浏览器会在文档解析的同时并行的加载这些脚本。如果脚本是内联的，浏览器会先去执行这段内联的脚本，如果是外链的，那么先会去加载脚本，然后再执行。事件的执行，去执行已经加载好的脚本信息，如果此时脚本还未加载完成，则会等待脚本加载完成后，再执行该脚本。，则该脚本不会阻碍文档的解析，只会在文档解析的同时去加载脚本信息，当文档解析完成后，暂时阻止。
js中defer简单理解
10-19 1398
defer只是加载完成页面元素后在执行js脚本。其实就是简单的利用defer属性，让浏览器读JS脚本的时候完全不等脚本开始读就开始读下面的图片啊，html代码了。然后让js脚本自己在那里慢慢读取完以后再执行。给外链的js脚本添加defer="true"，像下面这个这样就可以了：
js script中的defer和async
SailingCoder的博客
03-04 931
特性asyncdefer加载方式并行加载脚本并行加载脚本执行时机脚本下载完成后立即执行（可能会在文档解析完成前）文档解析完成后，DOMContentLoaded事件触发前执行执行顺序不能保证脚本按照在文档中出现的顺序执行保证脚本按照在文档中出现的顺序执行适用场景不依赖DOM，不依赖其它脚本的独立模块依赖DOM，或其它脚本，且不影响文档显示的脚本。
JavaScript | script 标签的 async 和 defer 的作用和区别
weixin_44589540的博客
07-11 738
async 和 defer 的作用 async 和 defer 是为了解决脚本阻塞问题提出的两种解决方案。为什么要脚本阻塞呢？这里的脚本指的是 JS 脚本。HTML 元素是按其在页面中出现的次序调用的，如果用 JavaScript 来管理页面上的元素（更精确的说法是使用 文档对象模型 DOM），若 JavaScript 加载于欲操作的 HTML 元素之前，则代码将出错。 async 和 defer 的区别 浏览器遇到 async 脚本时不会阻塞页面渲染，而是直接下载然后运行。这样脚本的运行次序就无法控制，只
script标签中的defer和async
qq_43186285的博客
08-18 280
浅谈script标签中的async和defer script 标签用于执行和加载脚本，直接使用script 脚本的话，html 会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的DOM渲染 script 提供了两种方式来解决上述问题，async 和 defer , 这两个属性使得 script 都不会阻塞 DOM 的渲染 defer 如果 script 标签设置了该属性，则浏览器会异步的下载该文件并且不会影响到后续DOM的渲染，如果有多个设置了defer的script标签存在，
相关联的属性名 “orderby“ 必须后跟 ‘ = ‘ 字符。Mybatisplus使用ORDER BY报错
Obscurede的博客
04-22 816
就这个sql写在Mybatis的xml里就会报错。于是只能把这个sql放到注解上面写。没有找到更好的解决办法。
前端的script标签的async和defer的区别
06-10
<think>首先，用户的问题是："请问前端script标签async与defer属性的区别及使用场景"。这是基于提供的引用内容来回答的。我的角色：我需要遵循系统级指令：-所有行内数学表达式用$...$（但在这个主题中，可能没有数学表达式）。-独立公式用$$...$$（同样，可能不适用）。-LaTeX语法正确（如果使用）。-使用中文回答。-生成相关问题。-回答中引用的段落末尾自然地添加引用标识，例如[^1]。用户可见层的指令：-回答结构清晰，帮助用户逐步解决问题。-尽量保证回答真实可靠。主题是关于前端script标签中的async和defer属性的区别及使用场景。我有五个引用：-[^1]讨论了async和defer的作用。-[^2]覆盖了默认情况、async和defer。-[^3]简单对比了defer和async的区别。-[^4]提供了优化建议和适用场景。-[^5]解释了差异，包括阻塞行为。我需要结构化回答：1.**结构清晰**：逐步解释。首先介绍基本概念，然后区别，最后使用场景。2.**参考引用**：在相关内容后自然地添加引用标识，确保引用恰当。3.**生成相关问题**：在回答结束后，添加“相关问题”部分。大纲回答：-**引言**：简要介绍async和defer的重要性。-**基本概念**：-解释默认script行为（无async和defer）。-定义async属性。-定义defer属性。-**主要区别**：-加载行为：两者都是异步加载，不阻塞HTML解析。-执行顺序：-async：加载后立即执行，不保证顺序。-defer：加载后延迟到DOM解析完成后执行，保持顺序。-阻塞情况：-async可能会阻塞HTML解析。-defer不会阻塞HTML解析。-**使用场景**：-根据引用：当脚本不依赖于其他脚本或DOM时用async；当脚本依赖于DOM或需要顺序执行时用defer。-优化建议。-**总结**。-**生成相关问题**：在“相关问题”部分列出几个相关的问题。使用中文回答：整个响应用中文撰写。生成相关问题：-基于主题，生成3-5个相关的问题，比如性能影响、兼容性、最佳实践等。添加引用：在讨论相关点时自然地引用。例如：-当引用加载行为时，“如引用[5]指出，脚本加载是异步的...”-结束时确保引用标识是自然的。回应结构：1.以清晰的结构呈现。2.解释差异：执行顺序、阻塞、依赖关系。3.对比表可能有帮助：如引用[4]有一个表格。4.保持真实可靠：使用引用内容来支撑论点。最终输出：-回答部分。-§§相关问题§§部分。现在，起草响应。</think> ### 前端 script 标签 async 与 defer 属性的区别及使用场景 在前端开发中，JavaScript脚本通过 `<script>` 标签加载时，`async` 和 `defer` 属性用于优化页面性能和用户体验。它们都能避免脚本加载阻塞HTML解析，但在执行顺序和执行时机上有显著差异。基于提供的信息（引用[1]-[5]），我将一步步解释它们的区别及实际使用场景，确保内容真实可靠。 #### 基本概念 在讨论 `async` 和 `defer` 前，先了解默认行为： - **默认行为（无属性）**：当浏览器遇到 `<script>` 标签时，它会**暂停HTML解析**，等待脚本加载和执行完成后才继续解析文档。这可能导致页面渲染延迟、白屏时间长，影响用户体验[^5][^2]。 - **异步加载的本质**：`async` 和 `defer` 都使脚本**加载过程异步化**，由网络进程负责，不阻塞HTML解析。但脚本**执行过程**仍然是同步的（占用渲染进程）[^5]。 #### async 与 defer 的核心区别 下面比较两者的关键差异，基于它们的定义和行为： | 属性 | 加载行为 | 执行顺序 | 执行时机 | 是否阻塞HTML解析 | 依赖关系 | |------|----------|----------|----------|------------------|----------| | **async** | 异步加载（不阻塞HTML解析） | **不保证顺序**：脚本加载完成后立即执行，谁先加载谁先执行。 | 加载完成后立即执行，可能在DOM解析前或期间。 | **可能阻塞**：执行脚本时可能占用渲染进程，短暂中断HTML解析。 | **不推荐依赖DOM或其他脚本**：执行顺序不确定，易导致错误。 | | **defer** | 异步加载（不阻塞HTML解析） | **保证顺序**：脚本按在HTML中出现的顺序执行，但延迟到DOM解析完成后执行。 | 延迟到HTML解析完全结束、DOMContentLoaded事件触发前执行。 | **不阻塞**：执行过程不影响HTML解析。 | **推荐依赖DOM或其他脚本**：确保所有脚本按序执行，适合需要DOM操作的场景。 | 关键区别总结： - **执行顺序**：`async` 可能导致脚本乱序执行（如加载较快的脚本先执行），而 `defer` 严格保持HTML文档顺序执行，适合脚本有依赖关系的情况[^3][^5]。 - **执行时机**：`async` 脚本一加载完就执行，可能在DOM加载中途；`defer` 脚本只在DOM解析完成后才执行，发生在`DOMContentLoaded`事件之前[^1][^2]。 - **阻塞风险**：`async` 的执行阶段可能短暂阻塞HTML解析（如脚本较大时），但 `defer` 几乎不会阻塞，除非脚本执行耗时过长[^5][^4]。 - **依赖处理**：`defer` 更适合需要访问DOM元素的脚本，因为它确保执行时DOM已就绪；而 `async` 用于完全独立的脚本，避免因为顺序问题引发bug[^3][^4]。 #### 使用场景与实用建议 根据优化经验和业务需求，合理选择属性可以提升页面加载速度和稳定性。基于引用内容，推荐以下场景： 1. **使用 `async` 的场景**： - **独立脚本或不依赖DOM的脚本**：例如第三方分析工具（如 Google Analytics）、广告脚本、独立组件库。这些脚本不需要等待页面DOM构建，且顺序无关紧要。加载后立即执行，减少整体延迟[^4][^1]。 - **性能优化**：对于轻量级脚本或资源，`async` 能快速执行而不破坏用户体验。但需测试兼容性（如旧浏览器支持有限）[^2][^5]。 - **代码示例**： ```html <script async src="analytics.js"></script> ``` 2. **使用 `defer` 的场景**： - **依赖DOM或其他脚本的脚本**：例如主应用脚本、需要操作DOM的插件或框架（如 jQuery）。`defer` 保证所有脚本按序在DOM就绪后执行，避免"元素未定义"错误[^1][^4]。 - **提高用户体验**：在页面内容渲染后加载关键脚本，减少白屏时间，适用于需要内容优先的场景。 - **代码示例**： ```html <script defer src="vendor.js"></script> <script defer src="app.js"></script> <!-- app.js 依赖 vendor.js 时安全 --> ``` 3. **通用优化技巧**： - **避免混合使用**：在同一页面混用 `async` 和 `defer` 可能导致意外行为，优先选择其中一种[^1]。 - **兼容性和测试**：`defer` 和 `async` 在大多数现代浏览器中支持良好，但在IE9及以下需测试备用方案。引用[2]建议使用工具（如Lighthouse）验证性能影响[^2][^5]。 - **默认建议**：当不确定时，优先用 `defer` 以确保安全和顺序；而三方工具首选 `async` 以减少阻塞[^4][^3]。 #### 总结 `async` 和 `defer` 都通过异步加载提升性能，但 `async` 适合独立、无依赖的脚本，而 `defer` 更适合依赖DOM或顺序执行的脚本。正确使用时，能显著减少页面加载时间（如通过优化First Contentful Paint指标）。引用[5]强调，异步加载是现代前端优化的核心策略之一[^5]。实践中，开发者应根据脚本特性和需求权衡选择。 如需深入了解实现细节，可参考引用[1]和[4]的示例代码和优化策略[^1][^4]。 ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值