script里面的defer和async

最新推荐文章于 2025-04-13 21:43:20 发布
最新推荐文章于 2025-04-13 21:43:20 发布
阅读量886 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JS 文章标签： defer和async
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qiankui520/article/details/49158437
本文详细介绍了在HTML中加载JavaScript文件的不同策略。通过对比不使用、使用defer与使用async属性的效果，帮助开发者理解如何优化页面加载速度及执行顺序，提高用户体验。

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

在引用JS文件时，如果不加defer和async，浏览器读到下面a.js文件时，会把第一个js下载完并执行，然后再接着下载b.js并执行接着再读下面的。

当加了defer时，浏览器把a.js文件下载下来不是马上执行，而是等到整个页面都加载完后再执行。

加了async属性时，浏览器会b.js文件下载并执行，在执行b.js的同时，并不影响浏览器继续解析下面的代码，这是个异步执行的属性，而上面那个defer是个推迟执行的属性。



<script defer src="js/a.js"></script>

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

defer和async属性在script标签中分别有什么作用？
My_railgun的博客
01-11 859
基于coderwhy老师的课程笔记整理1、不使用属性时的问题浏览器在解析HTML的过程中，遇到script元素时，会停止继续构建DOM树，首先下载JavaScript代码并执行JavaScript的脚本。脚本执行结束后，才会继续解析HTML，构建DOM树。这样做的原因是：JavaScript的作⽤之⼀就是操作并且修改DOM；如果等到DOM树构建并且渲染完成再执⾏JavaScript，会造成严重的回流和重绘，影响⻚⾯的性能；
浅谈script标签中的async和defer
weixin_33849942的博客
10-17 330
script标签用于加载脚本与执行脚本，在前端开发中可以说是非常重要的标签了。直接使用script脚本的话，html会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的DOM渲染。 现在大家习惯于在页面中引用各种的第三方脚本，如果第三方服务商出现了一些小问题，比如延迟之类的，就会使得页面白屏。好在script提供了两种方式...
js之script属性async与defer
weixin_30624825的博客
01-20 136
概念 默认情况下js的脚本执行是同步和阻塞的，但是 <script> 标签有 defer 和 async 属性, 这可以改变脚本的执行方式，这些都是布尔类型了，没有值，只需要出现在 <script> 标签里即可。 如： 还要注意一点，html5说这些属性只在和src属性联合使用时才有效。 如果同时指定了两个属性，则会遵从async属性而忽略...
深入解析 HTML 中 `＜script＞` 标签的 async 和 defer 属性
最新发布
qq_43474235的博客
04-13 742
在网页性能优化中，脚本的加载和执行方式直接影响页面渲染速度和用户体验。属性提供了非阻塞的解决方案。本周重点研究二者的差异、适用场景及实际应用。标签的阻塞行为可能导致页面“白屏”，而。
script中的async和defer
韶光
05-17 511
在&lt;script&gt;中有两个属性，async和defer。前者指示浏览器是否在允许的情况下异步执行该脚本；后者被设定用来通知浏览器该脚本将在文档完成解析后，触发DOMContentLoaded事件前执行。它们都对内联脚本无作用（即没有src属性的脚步）。在Asynchronous and deferred JavaScript execution explained中解释为：也就是说：s...
script标签中的async与defer属性
lwx33912138的博客
11-30 912
script标签defer和async的概念与区别
＜script＞标签的async和defer属性
qq_54140719的博客
09-22 2832
1、async：表示应该立即开始下载脚本，但不能阻止其他的页面动作，比如下载资源或等待其他脚本加载。只对外部脚本文件有效。 2、defer：表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。(在IE7及更早的版本中，在行内脚本也可以指定这个属性)。
浅谈HTML5 defer和async的区别
09-28
HTML5的`<script>`元素提供了两个可选的属性，`defer`和`async`，它们主要用于控制外部JavaScript脚本的加载和执行方式。这两者的设计目标都是为了优化页面加载性能，避免因为脚本的执行阻塞页面的渲染。 1. **没有...
JS中script标签defer和async属性的区别详解
11-26
总的来说，`defer`和`async`是JavaScript加载策略的重要组成部分，它们帮助开发者平衡脚本执行和页面渲染之间的关系，提高网页加载速度和用户体验。了解和合理运用这两个属性，是优化前端性能、提升网站质量的关键...
浅析script标签中的defer与async属性
01-21
竟然同时有async和defer属性，心想着肯定是前辈老司机的什么黑科技，两个一块儿肯定会发生什么神奇化学反应，于是赶紧怀着一颗崇敬的心去翻书翻文档，先复习一下各自的定义。 二、调查一番 先看看async和defer各自...
script标签的async和defer属性
Janejie_Zhou的博客
04-03 520
async和defer均为script元素的属性 async: 表示立即下载脚本，但不应妨碍页面中的其他操作，比如下载资源或等待加载其他脚本。不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。async='async' defer: 表示脚本可以延迟到文档完全被解析和显示之后再执行。延迟脚本，defer='defer'脚本等到之后再执行 相同： 只对外部脚本有效 只要不存在async和de...
<script>标签 async与defer详解
Akim0To的博客
02-22 484
首先，我们要知道浏览器的渲染过程，在网页渲染过程中，如果遇到<script> 标签是立即下载的，会阻塞页面的解析，显而易见的效果就是，你会发现页面有一段时间是空白的，因为浏览器只有等待js下载执行完毕后才会继续渲染。这样的用户体验是很差的，也是大多数开发者会把 <script> 放在</body>之前的原因。延迟脚本HTML4.01为<script> 标签增加了defer属性，这个属性是告诉浏览
玩转代码|Script 标签中的async与defer属性详细分析
Jum的博客
07-12 1574
Hello 👋🏻 ~
你不知道的 script 标签的 defer 与 async 属性
u012384510的博客
10-26 575
我持续组织了近一年的源码共读活动，感兴趣的可以点此扫码加我微信ruochuan12参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》包含20余篇源码文章。历史面试系列。另外：目前建有江西|湖南|湖北籍前端群，可加我微信进群。前言在面试的时候，经常会遇到一道经典的面试题：如何优化网页加载速度？常规的回答中总会有一条：把 css 文件放在页面顶部...
『解疑』script标签 中 deffer和async属性的区别？
DemoJx的博客
11-26 874
script标签 中 deffer和async属性的区别？
script标签的defer和async属性详解
weixin_45092437的博客
03-24 6729
对于普通脚本，如果设置该属性，那么该脚本将会并行加载，不阻碍HTML文档的解析，当加载完成后，如果此时文档还没解析完成，则会终止解析，先执行该脚本，执行结束后再继续解析；，浏览器会在文档解析的同时并行的加载这些脚本。如果脚本是内联的，浏览器会先去执行这段内联的脚本，如果是外链的，那么先会去加载脚本，然后再执行。事件的执行，去执行已经加载好的脚本信息，如果此时脚本还未加载完成，则会等待脚本加载完成后，再执行该脚本。，则该脚本不会阻碍文档的解析，只会在文档解析的同时去加载脚本信息，当文档解析完成后，暂时阻止。
script标签以及defer和async属性
weixin_42576837的博客
05-15 1390
async属性也只适用于外部脚本，浏览器同样会立即下载脚本，但是与defer不同的是，async的脚本不能保证按照它们出现的次序执行，而且当该脚本下载完成后就会立即执行该脚本。标签时，首先开始下载脚本，从脚本开始下载到脚本完成执行，整个过程中，HTML的解析都是停止的。可以发现，对于async的脚本，脚本下载时，HTML仍然在解析，但是与defer不同的是，当脚本下载完成后立即就会执行脚本。可以发现，对于defer的脚本，脚本下载时，HTML仍然在解析，当HTML解析完成以后，开始执行脚本，即延迟执行。
script标签的defer和async及服务器渲染
wyzqhhhh的博客
01-15 1249
有时候，项目中也会采用混合的方式，称为“同构应用”（Isomorphic App），结合了服务器渲染和客户端渲染的优势。在实际项目中，有时候也会选择使用混合的方式，即同构应用（Isomorphic App），结合了服务器渲染和客户端渲染的优势，以满足项目的多样化需求。渲染树包含了需要在屏幕上渲染的所有可见元素，但它并不包括不可见的元素，比如中的元素。3.对于内容频繁变化： 如果项目中的内容需要频繁变化，但用户对于初始加载速度的要求较高，可以考虑使用 SSR，以保证页面的初始内容是即时可见的。
JS面试题---script中的async和defer
2202_75922690的博客
02-06 1024
被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。外部脚本就是通过src属性引入的其它脚本文件，浏览器会对外部脚本文件进行缓存，提高页面加载速度。属性可选，表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待其他脚本加载。在渲染页面元素的同时下载外部脚本资源，不会阻塞页面的加载，但下载完后会立即执行脚本内容。时，浏览器会立即加载并执行相应的外部脚本。操作DOM的脚本，为防止元素尚未加载完成，脚本找不到元素报错。
script中defer和async
04-11
b'script\xe4\xb8\xaddefer\xe5\x92\x8casync'是关于JavaScript代码...defer是让代码在页面加载完毕后再执行，而async是让代码在下载完成后立即执行。两者的差别在于执行的时间点不同，使用时需要根据具体需求来选择。