JS- async和defer对script脚本加载的影响

最新推荐文章于 2024-07-24 21:05:41 发布
最新推荐文章于 2024-07-24 21:05:41 发布
阅读量952 收藏 2
点赞数 1
分类专栏： javaScript 文章标签： async defer DOMContentLoade
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhq2005095/article/details/89205343
版权
本文探讨了JS中async和defer属性对script脚本加载的影响。使用defer时，脚本会异步下载且按顺序在DOMContentLoaded事件之前执行；而async则使脚本异步加载，不保证执行顺序，不阻塞DOM渲染。注意，带有defer和async的脚本下载与HTML解析并行，但执行仍会阻塞HTML解析。了解这些特性对于优化网页加载速度和用户体验至关重要。
摘要由CSDN通过智能技术生成

直接使用script脚本的话，html会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的DOM渲染。
这是因为 UI 渲染线程与 JS 引擎是互斥的，当 JS 引擎执行时 UI 线程会被挂起。

defer

如果script标签设置了该属性，则浏览器会异步的下载该文件并且不会影响到后续 DOM 的渲染；
如果有多个设置了 defer 的script标签存在，则会按照顺序执行所有的script；
defer 脚本会在文档渲染完毕后， DOMContentLoaded 事件调用前执行。

async

async 的设置，会使得script脚本异步的加载并在允许的情况下执行。
async 的执行，并不会按着script在页面中的顺序来执行，而是谁先加载完谁执行。
DOMContentLoaded 事件的调用不会管带有 async 属性的script脚本是否加载完和执行完

注意点

带有 async 和 defer 的脚本的下载是和 HTML 的下载与解析是并行的，但是 JS 的执行一定是和 UI 线程是互斥的，像下面这张图所示，async 在下载完毕后的执行会阻塞HTML的解析

最低0.47元/天 解锁文章
zhq2005095
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS中的异步async-await（秒懂异步编程模式）
百赢出品，必属精品
04-09 1702
异步编程是一种编程模式，用于处理程序中需要长时间等待的操作，比如网络请求、文件读写、定时器等。在传统的同步编程模式下，程序会按照顺序一步步执行，如果遇到需要耗时的操作，程序会阻塞等待操作完成，直到操作完成后才能继续执行后续代码。异步编程模式是一种用于处理异步操作的编程范例，其核心目标是提高程序的效率和性能，同时保持代码简洁易读。回调函数最基本的异步编程模式，通过将函数作为参数传递给异步操作，在操作完成时调用该函数。容易导致回调地狱（Callback Hell），难以维护和理解，因为嵌套层级很深。
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
11-22
defer和async特性相信是很多JavaScript开发者”熟悉而又不熟悉”的两个特性，从字面上来看，二者的功能很好理解，分别是”延迟脚本”和”异步脚本”的作用。然而，以defer为例，一些细节问题可能开发者却并不一定熟悉，比如：有了defer特性的脚本会延迟到什么时候执行；内部脚本和外部脚本是不是都能够支持defer；defer后的脚本除了会延迟执行之外，还有哪些特殊的地方等等。本文结合已有的一些文章以及MDN文档中对两个特性的阐述，对defer和async进行更全面的研究和总结，希望能够帮助开发者更好地掌握这两个特性。 1 引言 在《浏览器环境下JavaScript脚本加载与执行探
js中defer实现等文档加载完在执行脚本
weixin_30417487的博客
10-09 188
我们可以使用defer来实现类似window.onload的功能: <script src="../CGI-bin/delscript.js" defer></script> 当然我们也可以写在脚本里: <script defer>function document.body.onload() {alert(document.body.offse...
那些需要用但会影响加载速度的script脚本处理：async，defer
sanlyshi's front-end road
10-17 408
script标签用于加载脚本与执行脚本，在前端开发中可以说是非常重要的标签了。 直接使用script脚本的话，html会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的DOM渲染。 现在大家习惯于在页面中引用各种的第三方脚本，如果第三方服务商出现了一些小问题，比如延迟之类的，就会使得页面白屏。 好在script提供了两种方式来解决上述问题，async和defer，这两...
JS延迟加载（async、defer）
m0_49202939的博客
05-28 171
首先来看没有任何属性的 <script>标签：当html文件在解析时遇到<script>标签，则会暂停解析html，然后开始下载<script>标签链接进来的js脚本，并且执行下载好的js脚本。以上动作完成后才会继续解析未完成的html。带有async的<script>标签，则会将解析html和下载js脚本同时进行，但js脚本下载完成后会暂停html的解析并立即执行下载好的js脚本。等js脚本执行完毕将会继续解析未完成的html。（如果是多个js脚本，那么执行顺序不分先后，谁先下载完成谁先执行）
JS script脚本中async和defer区别详解
10-15
在JavaScript的世界里，`async` 和 `defer` 是两个在`<script>`标签中用于控制脚本加载和执行方式的关键属性。它们主要用来解决脚本阻塞页面渲染的问题，确保网页的加载性能和用户体验。下面将详细讲解这两个属性的...
HTML5 script元素async、defer异步加载使用介绍
09-28
HTML5的`<script>`元素引入了两个重要的属性：`async`和`defer`，这两个属性主要用于异步加载JavaScript文件，以减少页面加载时的阻塞，提高用户体验。在过去，开发者通常需要通过复杂的JavaScript技巧来实现类似的...
JavaScript无阻塞加载和defer、async详解
01-19
下载是异步的没问题，但是每个javascript执行的时候还是同步的，就是先出现的script标签一定是先执行，即使是并行下载它是最后一个下载完成的，除非标有defer的script标签。任何javascript在执行的时候都会中断当前...
使用SCRIPT的defer属性
Web 开发&软件开发
07-24 276
使用SCRIPT的defer属性 HTML标记库中很少使用的属性之一是SCRIPT元素上的defer属性。 您可以通过属性的名称看出来， defer指示脚本标记的内容在页面加载之前不执行。 看一看！ 延迟脚本 <script> //do stuff (runs first) </script> <script defer="defer"> //...
script标签中的async和defer
weixin_48082725的博客
01-17 516
defer 如果script标签设置了该属性，则浏览器会异步的下载该文件并且不会影响到后续DOM的渲染； 如果有多个设置了defer的script标签存在，则会按照顺序执行所有的script； async async的设置，会使得script脚本异步的加载并在允许的情况下执行 async的执行，并不会按着script在页面中的顺序来执行，而是谁先加载完谁执行。 ...
使用async/await并不会执行接下来的代码，原因及解决办法
changyana的博客
08-19 1684
get_table_header函数中创建了新的Promise，但是在处理get_table_header_setting(params)的响应时，并未调用resolve()或reject()，这使得返回的Promise永远处于pending状态，所以await this.get_table_header()也就永远不会返回，导致后续的代码无法执行。
【JavaScript】defer和async的区别
'Ablaze 的专栏
04-16 818
转载自：https://segmentfault.com/q/1010000000640869 先来试个一句话解释仨，当浏览器碰到 script 脚本的时候： &lt;script src="script.js"&gt;&lt;/script&gt; 没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不...
script标签的defer和async属性详解
weixin_45092437的博客
03-24 4030
对于普通脚本，如果设置该属性，那么该脚本将会并行加载，不阻碍HTML文档的解析，当加载完成后，如果此时文档还没解析完成，则会终止解析，先执行该脚本，执行结束后再继续解析；，浏览器会在文档解析的同时并行的加载这些脚本。如果脚本是内联的，浏览器会先去执行这段内联的脚本，如果是外链的，那么先会去加载脚本，然后再执行。事件的执行，去执行已经加载好的脚本信息，如果此时脚本还未加载完成，则会等待脚本加载完成后，再执行该脚本。，则该脚本不会阻碍文档的解析，只会在文档解析的同时去加载脚本信息，当文档解析完成后，暂时阻止。
js defer和async的区别
baidu_39305094的博客
03-12 907
当浏览器碰到script脚本的时候： &lt;script src="script.js"&gt;&lt;/script&gt; 没有defer或async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。 &lt;script async src="script.js...
JS中关于async和defer作用与区别
qq_34082921的博客
02-24 925
script 是会阻碍 HTML 解析的，只有下载好并执行完脚本才会继续解析 HTMLdefer 和 async有一个共同点：下载此类脚本都不会阻止页面呈现（异步加载），区别在于：async 执行与文档顺序无关，先加载哪个就先执行哪个；defer会按照文档中的顺序执行 async脚本加载完成后立即执行，可以在DOM尚未完全下载完成就加载和执行；而defer脚本需要等到文档所有元素解析完成之后才执行script标签js执行顺序是否阻塞script在html顺序执行阻塞。
async和defer的区别?
qq_44621394的博客
08-26 4017
async和defer的异同主要是因为他们的加载和执行时机。普通的script(不使用async和defer)加载完会立即执行,会阻塞script标签下面的资源加载和dom的解析使用async后,script加载完后会立即执行。(网络)资源的加载过程是异步的,不会阻塞后续资源的加载dom和解析。使用defer后,script异步加载,html解析之后执行、DomContentLoaded之前执行。通常情况下defer的使用频率较高,它能保证script之间的变量依赖。...
详解defer和async的原理及应用
热门推荐
LiuHe
05-03 2万+
defer和async是script标签的两个属性，用于在不阻塞页面文档解析的前提下，控制脚本的下载和执行。 在介绍他们之前，我们有必要先了解一下页面的加载和渲染过程： 1. 浏览器通过HTTP协议请求服务器，获取HMTL文档并开始从上到下解析，构建DOM； 2. 在构建DOM过程中，如果遇到外联的样式声明和脚本声明，则暂停文档解析，创建新的网络连接，并开始下载样式文件和脚本文件； 3. 样
详解JS前端异步文件加载篇之Async与Defer区别
izl040905的博客
11-22 682
异步的英语是async，推迟的英语是defer，同步的就不说了哈。但同步是Javascript中一个非常重要的概念。当浏览器加载HTML时一旦遇到标签， 就会停下来先把标签里的内容执行掉，如果标签中有外部文件，那就必须等待下载和执行的步骤，这样浏览器才会继续向下加载，如果这个外部文件刚好在一个网络情况比较差的服务器上，这样整个网页的加载都会收到很大的影响，这就是同步带来的代码阻塞弊端。
script标签中defer和async的区别
最新发布
qq_64000756的博客
07-24 179
如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。
script async和defer的区别
04-06
async 和 defer 都是用于异步加载 JavaScript 的属性。 async 表示该脚本在加载时不阻塞页面渲染，而是异步加载，当脚本加载完成后立即执行。多个 async 属性的脚本加载和运行顺序是不确定的。 defer 属性也表示该脚本在加载时不阻塞页面渲染，但是会在文档解析完毕后按照顺序依次执行。因此多个 defer 属性的脚本按照它们在文档中出现的顺序加载和运行。 总的来说，async 适用于不需要等待其他资源就能立即执行的脚本，而 defer 适用于需要在文档解析完毕后才能执行的脚本，且需要按照顺序执行。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值