Defer和async的区别

最新推荐文章于 2024-03-23 23:13:44 发布
最新推荐文章于 2024-03-23 23:13:44 发布
阅读量104 收藏
点赞数
分类专栏： 前端 文章标签： javascript html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46003450/article/details/120903475
版权

不设置defer和async

网页加载是边渲染边加载js文件的，顺序如下：
1，加载html文件
2，如果遇到js文件，如果是外部js文件，则停止渲染html文档，下载js文件；如果是内部js，则执行js
3，js文件下载完毕后执行
4，执行完后继续渲染html文件

设置async

1，加载html文件
2，遇到js文件，不停止渲染html文档，下载html文件
3，js文件下载完毕后执行，停止渲染html文档
4，js文件执行完毕后继续渲染html文档

设置defer

1，加载html文件
2，遇到js文件，不停止渲染html文档，下载html文件
3，js文件下载完毕后，不停止渲染html文档
4，html文档渲染完毕后执行js文件

总结

正常：遇到js停止解析html，下载执行js，再解析渲染html
async：遇到js不停止解析，下载执行js，再解析渲染html
defer：遇到js不停止解析，下载js，解析渲染html，再执行js

枝桠rua
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
script 标签的 async 和 defer 属性
zxf_CN的博客
12-28 250
提问：我们平时都是把 script 标签放到 body 的底部，这是为什么呢？ 回答： 因为 html 页面是从上而下进行渲染的，遇到 script 标签的话，会进入，去 下载 相应的资源，直到下载好后就会 执行， html 页面才开始继续向下执行，这样会拖慢 html 页面的渲染速度，还有如果一些脚本文件需要操作 DOM，但此时 html 页面还没有加载好，就会报错了；所以一般我们把 script 放到 body 的底部；（总结：放在底部是要等待 html 加载好后，才进行加载）； 提问： 那 ..
浅谈HTML5 defer和async的区别
09-28
理解`defer`和`async`的区别很重要，因为它们影响到脚本的加载和执行策略。通常，将`defer`用于那些不依赖于文档解析顺序的脚本，`async`用于完全独立的脚本，而无`defer`或`async`的脚本则应尽可能优化以减少阻塞...
defer和async的区别
weixin_34342992的博客
12-09 258
先来试个一句话解释仨，当浏览器碰到 script 脚本的时候： <script src="script.js"></script> 没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。 <script async sr...
js----script 的 defer属性 和 async 属性
weixin_33901641的博客
02-28 100
参考 https://segmentfault.com/a/1190000006778717 defer && async 共同点 1.都用于改变处理脚本的行为2.这两个属性都会使script标签异步加载，然而执行的时机是不一样的 defer 推迟 1.脚本会被延迟到整个页面都解析完毕后再运行2.相当于告诉浏览器立即下载，但延迟执行。 HTML5...
defer和async
michael8512的博客
09-16 423
1、defer: 只支持IE 1）defer 属性规定是否对脚本执行进行延迟，直到页面加载为止； 2）并行加载js文件，会按照页面上script标签的顺序执行。 2、async 并行加载js文件，下载完成立即执行，不会按照页面上script标签的顺序执行。 注释：有多种执行外部脚本的方法：  1）如果 async="async"：脚本相对于页面的其余部分异步地执行（当页
script标签中defer和async属性的区别
weixin_30648963的博客
08-12 114
　　这篇文章来源于JS高级程序设计第三版中关于script标签的介绍，结合查阅的资料写下的学习笔记。 　　向html页面中插入javascript代码的主要方法就是通过script标签。其中包括两种形式，第一种直接在script标签之间插入js代码，第二种即是通过src属性引入外部js文件。由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染，对于存在大量js代码的页面来说会导致浏...
关于Javascript中defer和async的区别总结
10-21
相信看过javascript高级程序设计的人，在javascript高级程序设计里，应该看到了介绍了有关defer和async的区别，可是比较浅显，而且也说得不是很清楚。下面我们来通过这篇文章来详细了解下dfer和async的区别。
JS中script标签defer和async属性的区别详解
10-21
主要介绍了JS中script标签defer和async属性的区别详解的相关资料,需要的朋友可以参考下
script标签的defer和async ---总结
昔人'
05-07 913
async 与 defer 的差别 async 和 defer 标注的 script 都不会暂停HTML解析就立刻被下载,两者都支持onload事件回调来解决需要该脚本来执行的初始化。 两者的区别在于执行时的不同：async 脚本在script文件下载完成后会立即执行,并且其执行时间一定在 window的load事件触发之前。这意味着多个async脚本很可能不会按其在页面中的出现次序顺序执...
defer 和 async：JavaScript异步编程的利器
最新发布
你若盛开，清风自来
03-23 1125
本文将介绍defer和async这两个JavaScript异步编程的关键概念，帮助您了解如何利用它们实现更高效、灵活的异步操作。🎉 defer和async是JavaScript异步编程的关键概念，它们可以帮助我们实现更高效、灵活的异步操作。通过了解defer和async的概念、使用场景和工作原理，我们可以更好地利用它们提高页面加载速度和响应性。
defer和async属性详解
桃花扇的博客
02-06 440
script标签的加载是同步执行的，也就是说如果将JavaScript文件放在head标签中时，必须等所有JavaScript代码下载、解析和解释完毕后，才能开始渲染页面 (页面在解析到body标签时，开始渲染），这样的话，当js文件过多时，会导致渲染延迟，浏览器空白的情况，因此一般情况我们将js文件放在页面内容之后。并且提出了延迟执行脚本异步执行脚本，通过给script标签添加属性defer或者async来实现。 1.推迟执行脚本_defer 添加了defer属性的脚本会告诉浏览器，立即下载该脚本，但
面试官：说一下script 标签中 defer（推迟） 和 async（异步） 的区别
upgrade_bro的博客
08-14 3852
script 标签中 defer 和 async 的区别：“在解析HTML文档过程中，defer和async标注的脚本都会立即下载。不同的是……”
async vs defer 的区别
Mark
08-23 535
两者都会并行下载，不会影响页面的解析。 defer 会按照顺序在 DOMContentLoaded 前按照页面出现顺序依次执行。 async 则是下载完立即执行。
defer和 async的简单解释
weixin_34128534的博客
05-26 781
defer和async用于外部加载js文件，两种加载方式都是异步加载。好处是优化DOM和script文件的加载速度。 defer和async的比较： 相同点： 加载script文件时不会阻塞文档DOM结构的渲染 当外部引入的js文件加杀跟着两个属性之后该文件中的document.write方法将 无法使用，(如果引入的文件中必须使用documennt.write方法就不要给外部引入...
async和defer的区别?
qq_44621394的博客
08-26 3973
async和defer的异同主要是因为他们的加载和执行时机。普通的script(不使用async和defer)加载完会立即执行,会阻塞script标签下面的资源加载和dom的解析使用async后,script加载完后会立即执行。(网络)资源的加载过程是异步的,不会阻塞后续资源的加载dom和解析。使用defer后,script异步加载,html解析之后执行、DomContentLoaded之前执行。通常情况下defer的使用频率较高,它能保证script之间的变量依赖。...
1.async和defer的区别
weixin_70755082的博客
06-20 1405
/以二进制解析，运算过程：12的2次方+02的1次方+12的0次方=4+0+1=5，结果为 5。//以八进制解析，运算过程：18的2次方+08的1次方+18的0次方=64+0+1=65，结果为 65。没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。//以十六进制解析，运算过程：116的2次方+016的1次方+1*16的0次方=256+0+1=257，结果为 257。
【JavaScript】defer和async的区别
'Ablaze 的专栏
04-16 811
转载自：https://segmentfault.com/q/1010000000640869 先来试个一句话解释仨，当浏览器碰到 script 脚本的时候： <script src="script.js"></script> 没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不...
script标签的defer和async属性详解
weixin_45092437的博客
03-24 3935
对于普通脚本，如果设置该属性，那么该脚本将会并行加载，不阻碍HTML文档的解析，当加载完成后，如果此时文档还没解析完成，则会终止解析，先执行该脚本，执行结束后再继续解析；，浏览器会在文档解析的同时并行的加载这些脚本。如果脚本是内联的，浏览器会先去执行这段内联的脚本，如果是外链的，那么先会去加载脚本，然后再执行。事件的执行，去执行已经加载好的脚本信息，如果此时脚本还未加载完成，则会等待脚本加载完成后，再执行该脚本。，则该脚本不会阻碍文档的解析，只会在文档解析的同时去加载脚本信息，当文档解析完成后，暂时阻止。
js defer和async的区别
baidu_39305094的博客
03-12 902
当浏览器碰到script脚本的时候： <script src="script.js"></script> 没有defer或async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。 <script async src="script.js...
js的defer和async区别
07-13
defer和async都是用于控制脚本加载和执行的属性，用于解决JavaScript脚本对页面渲染的阻塞问题。 1. defer属性：当浏览器解析到带有defer属性的脚本标签时，会将该脚本的加载推迟到文档解析完毕后，在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值