script标签中的async和defer的作用

最新推荐文章于 2023-08-14 23:20:03 发布
最新推荐文章于 2023-08-14 23:20:03 发布
阅读量219 收藏
点赞数
分类专栏： html 文章标签： html5 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43956521/article/details/120449753
版权

defer

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

文档解析时，遇到设置了defer的脚本，就会在后台进行下载，但是并不会阻止文档的渲染，当页面解析&渲染完毕后。
会等到所有的defer脚本加载完毕并按照顺序执行，执行完毕后会触发DOMContentLoaded事件。

async

async的设置，会使得script脚本异步的加载并在允许的情况下执行
async的执行，并不会按着script在页面中的顺序来执行，而是谁先加载完谁执行。

async脚本会在加载完毕后执行。
async脚本的加载不计入DOMContentLoaded事件统计

累了你就写会代码吧
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
script 标签的 async 和 defer 属性
zxf_CN的博客
12-28 251
提问：我们平时都是把 script 标签放到 body 的底部，这是为什么呢？ 回答： 因为 html 页面是从上而下进行渲染的，遇到 script 标签的话，会进入，去 下载 相应的资源，直到下载好后就会 执行， html 页面才开始继续向下执行，这样会拖慢 html 页面的渲染速度，还有如果一些脚本文件需要操作 DOM，但此时 html 页面还没有加载好，就会报错了；所以一般我们把 script 放到 body 的底部；（总结：放在底部是要等待 html 加载好后，才进行加载）； 提问： 那 ..
JS script脚本中async和defer区别详解
10-15
在JavaScript的世界里，`async` 和 `defer` 是两个在`<script>`标签中用于控制脚本加载和执行方式的关键属性。它们主要用来解决脚本阻塞页面渲染的问题，确保网页的加载性能和用户体验。下面将详细讲解这两个属性的...
script标签的defer和async属性详解
weixin_45092437的博客
03-24 3943
对于普通脚本，如果设置该属性，那么该脚本将会并行加载，不阻碍HTML文档的解析，当加载完成后，如果此时文档还没解析完成，则会终止解析，先执行该脚本，执行结束后再继续解析；，浏览器会在文档解析的同时并行的加载这些脚本。如果脚本是内联的，浏览器会先去执行这段内联的脚本，如果是外链的，那么先会去加载脚本，然后再执行。事件的执行，去执行已经加载好的脚本信息，如果此时脚本还未加载完成，则会等待脚本加载完成后，再执行该脚本。，则该脚本不会阻碍文档的解析，只会在文档解析的同时去加载脚本信息，当文档解析完成后，暂时阻止。
script标签中的defer和async
chenrongwei92的博客
10-10 9317
普通script: 文档解析的过程中，如果遇到script脚本,停止页面的解析渲染, 下载script脚本。 如果是多个script脚本, 近似于同时并行下载script脚本。 不论script脚本哪个先下载好, 都按照html中的先后顺序依此执行。 即如果后面的script脚本先下载好, 要等前面的script脚本下载好并执行后, 才能执行。 执行script脚本时, 也是停止页面的解析渲染。 执行完script脚本, 继续页面的解析渲染。 执行完script脚本和页面解析渲染完, 才会...
面试官：说一下script 标签中 defer（推迟） 和 async（异步） 的区别
最新发布
upgrade_bro的博客
08-14 3866
script 标签中 defer 和 async 的区别：“在解析HTML文档过程中，defer和async标注的脚本都会立即下载。不同的是……”
玩转代码|Script 标签中的async与defer属性详细分析
Jum的博客
07-12 1360
Hello 👋🏻 ~
你不知道的 script 标签的 defer 与 async 属性
u012384510的博客
10-26 452
我持续组织了近一年的源码共读活动，感兴趣的可以点此扫码加我微信ruochuan12参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》包含20余篇源码文章。历史面试系列。另外：目前建有江西|湖南|湖北籍前端群，可加我微信进群。前言在面试的时候，经常会遇到一道经典的面试题：如何优化网页加载速度？常规的回答中总会有一条：把 css 文件放在页面顶部...
JS中script标签defer和async属性的区别详解
10-21
主要介绍了JS中script标签defer和async属性的区别详解的相关资料,需要的朋友可以参考下
浅析script标签中的defer与async属性
09-01
【script标签中的defer与async属性】 在HTML中，`<script>`标签通常用来引入JavaScript文件，但在实际应用中，为了优化页面加载性能，我们有时会使用`defer`和`async`属性。这两个属性都是用来控制脚本的加载和执行...
script 标签的defer,async的作用，及拓展浏览器多线程，DOMContentLoaded
alkbjewq29891的博客
04-09 250
前端优化有一点就是优化js的执行时机，一般做法是将script放置于body的结束标签，以避免加载执行js 文件导致页面渲染阻塞的问题这种做法确实能防止页面阻塞，但是在页面渲染完成之后才去加载js文件，有时候会显得js文件加载时间过长。于是我们可以合理的使用script的属性defer,async （一）分析defer，async的作用 （1）在不加defer，async的情况下页面...
script标签上的defer及async属性
yiyueqinghui的博客
07-09 990
1、script标签上的defer及async属性 Async：异步加载这个文件。表示应该立即下载脚本，但不应妨碍页面中的其他操作，只对外部脚本文件有效。 Defer: 延迟加载这个文件。标识脚本可以延迟到在html解析完后才执行。只对外部脚本文件有效。 当script上有defer或async属性时，script的下载时均不会阻塞html的解析，但是一旦含有async属性的脚本被下载完，它就会立即执行，执行时会阻塞html的解析，而含有defer属性的脚本则是在html解析完后（DOMContent
script 标签 async 属性
weixin_44479322的博客
08-13 4670
script 标签 async 属性 普通script 文档解析的过程中，如果遇到script脚本，就会停止页面的解析进行下载（但是Chrome会做一个优化，如果遇到script脚本，会快速的查看后边有没有需要下载其他资源的，如果有的话，会先下载那些资源，然后再进行下载script所对应的资源，这样能够节省一部分下载的时间 @Update: 2018-08-17）。 资源的下载是在解析过程中进行的，虽说script1脚本会很快的加载完毕，但是他前边的script2并没有加载&执行，所以他只能处于一个
script标签属性defer和async的作用
Bliss_妍的博客
08-27 385
在<script>元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。 HTML5规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于DOMContentLoaded事件执行。在现实当中，延迟脚本并不一定会按照顺序执行，也不一定会在DOMContentLoad时间触发前执行，因此最好只包含一个延迟脚本。 async只适用于外部脚本文件，并告诉浏览器立即下载文件。并不保证按照它们的先后顺序执行。第二个脚本文件可能会在第一个脚本文件之
JS中script标签defer和async属性的区别
StarFishing
11-30 4763
向html页面中插入javascript代码的主要方法就是通过script标签。其中包括两种形式，第一种直接在script标签之间插入js代码，第二种即是通过src属性引入外部js文件。由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染，对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟，为了避免这个问题，建议把全部的js引用放在标签之前。 script标签存在两个属性，def...
【深入理解 script 标签的 async,defer 属性(同步加载,异步加载,延迟执行)】
Hey_Coder
10-31 5254
async,defer 属性 同步加载,异步加载,延迟执行1.异步加载 和 延迟执行 存在的意义 : 避免影响 页面渲染/显示2. 同步 加载和执行 (影响 页面解析/渲染/显示)3. async 属性: 异步加载 (不是 异步执行,搭配 src 属性,仅限外部脚本)4. defer 属性: 延迟执行 (不是 延迟加载,加载是 并行的,搭配 src 属性,仅限 外部脚本 )5. 同步加载,异步加...
script 标签中的defer 和 async 属性
m0_66051368的博客
04-27 2137
浏览器在解析 HTML 的时候，如果遇到一个没有任何属性的 <script> 标签 ，就会暂停解析，先发送网络请求获取该 JS 脚本的代码内容，然后让 JS 引擎执行该代码，当代码执行完毕后恢复解析。整个过程如下图所示： 可以看到，script 阻塞了浏览器对 HTML 的解析，如果获取 JS 脚本的网络请求迟迟得不到响应，或者 JS 脚本执行时间过长，都会导致白屏，用户看不到页面内容。 解决方式如下： defer 和 async 都是异步加载外部的JS脚本文件，都不会阻塞页...
＜script＞标签中defer和async的作用和区别
m0_56201092的博客
01-09 1280
但是script文件的执行是同步的，执行的过程仍然会阻塞html的解析渲染。4.async 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的。和async一样，script引用的外部文件是异步加载的，但是defer会将外部文件的执行推迟到html解析结束后再执行。3.对async而言，脚本的加载和执行是紧挨着的，不管声明顺序如何，只要加载完就会立即执行。，创建新的网络连接，并开始下载样式文件和脚本文件；
浅谈script标签中的async和defer
weixin_33849942的博客
10-17 281
script标签用于加载脚本与执行脚本，在前端开发中可以说是非常重要的标签了。直接使用script脚本的话，html会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的DOM渲染。 现在大家习惯于在页面中引用各种的第三方脚本，如果第三方服务商出现了一些小问题，比如延迟之类的，就会使得页面白屏。好在script提供了两种方式...
script标签中defer和async
03-16
defer和async都是script标签中的属性，用于控制脚本的加载和执行。 defer属性表示延迟执行脚本，即在HTML文档解析完成后再执行脚本。defer属性只对外部脚本有效，内部脚本会忽略该属性。如果有多个defer脚本，它们...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值