关于Javascript中defer和async的区别总结

最新推荐文章于 2024-09-28 17:32:43 发布
最新推荐文章于 2024-09-28 17:32:43 发布
阅读量3k 收藏 12
点赞数 1

首先来看看这三句话：

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

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

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

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

?
1
< script defer src = "myscript.js" ></ script >

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

下面来进行详解的介绍这二者的区别。

一般情况

按照惯例，所有script元素都应该放在页面的head元素中。这种做法的目的就是把所有外部文件(CSS文件和JavaScript文件)的引用都放在相同的地方。可是，在文档的head元素中包含所有JavaScript文件，意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后，才能开始呈现页面的内容(浏览器在遇到body标签时才开始呈现内容)。

对于那些需要很多JavaScript代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题，现在Web应用程序一般都全部JavaScript引用放在body元素中页面的内容后面。这样一来，在解析包含的JavaScript代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。

?
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
< html >
< head >
  < meta charset = "utf-8" >
  < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
  < title ></ title >
</ head >
< body >
< script type = "text/javascript" src = "script.js" ></ script >
</ body >
</ html >

defer (延迟脚本)

延迟脚本：defer属性只适用于外部脚本文件。

如果给script标签定义了defer属性，这个属性的作用是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，如果script元素中设置了defer属性，相当于告诉浏览器立即下载，但延迟执行。

示例：

?
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
< html >
< head >
  < meta charset = "utf-8" >
  < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
  < title >延迟加载</ title >
  < script defer type = "text/javascript" src = "test.js" ></ script >
</ head >
< body >
</ body >
</ html >

这个例子中，虽然我们把script元素放在了文档的head元素中，但其中包含的脚本将延迟到浏览器遇到</html>标签后再执行。
HTML5规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于DOMContentLoaded事件(在DOM树构建完成后触发，不需要等到所有的资源都加载完毕)执行。

特别注意：在现实当中，延迟脚本并不一定会按照顺序执行，也不一定会在DOMContentLoaded事件触发前执行，因此最好只包含一个延迟脚本。

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

最佳实践

从实用角度来说，把所有脚本都放在 </body> 之前是最佳实践，因为对于旧浏览器来说这是唯一的优化选择，此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。

**注意：**defer属性在浏览器之间表现并不一致。为了避免跨浏览器的差异，可以使用 “lazy loading”的方法，即直到用到该脚本时才加载。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function lazyload() {
  var elem = document.createElement( "script" );
  elem.type = "text/javascript" ;
  elem.async = true ;
  elem.src = "script.js" ;
  document.body.appendChild(elem);
}
 
if (window.addEventListener) {
  window.addEventListener( "load" , lazyload, false );
} else if (window.attachEvent) {
  window.attachEvent( "onload" , lazyload);
} else {
  window.onload = lazyload;
}

async(异步脚本)

异步脚本：async属性也只适用于外部脚本文件，并告诉浏览器立即下载文件。

但与defer不同的是：标记为async的脚本并不保证按照指定它们的先后顺序执行。

?
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
< html >
< head >
  < meta charset = "utf-8" >
  < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
  < title >异步加载</ title >
  < script async type = "text/javascript" src = "test1.js" ></ script >
  < script async type = "text/javascript" src = "test2.js" ></ script >
</ head >
< body >
</ body >
</ html >

这个例子中，test2.js可能会在test1.js之前执行。因此，确保两者之间互不一来非常重要。指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。因此，建议异步脚本不要在加载期间修改DOM。

来看一张更加清晰的图：

图解：蓝色线代表网络读取，红色线代表执行时间，这两个都是针对脚本的；绿色线代表 HTML 解析。

通过上图和之前的分析，我们可以得出：

      1、defer 和 async 在网络读取（脚本下载）这块儿是一样的，都是异步的（相较于 HTML 解析）

      2、两者的差别：在于脚本下载完之后何时执行，显然 defer 是最接近我们对于应用脚本加载和执行的要求的。defer是立即下载但延迟执行，加载后续文档元素的过程将和脚本的加载并行进行（异步），但是脚本的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。async是立即下载并执行，加载和渲染后续文档元素的过程将和js脚本的加载与执行并行进行（异步）。

      3、关于 defer，我们还要记住的是它是按照加载顺序执行脚本的

      4、标记为async的脚本并不保证按照指定它们的先后顺序执行。对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行。

      5、async 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的。

总结

以上就是关于js中defer和async区别的全部内容，文章介绍的很详细，希望能对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。

liduanwh
关注
async与defer的区别
04-26
形象的描述了async与defer的区别，简单易懂的理解 async是异步执行，异步下载完毕后就会执行，不确保执行顺序，一定在 onload前，但不确定在 DOMContentLoaded事件的前或后 defer是延迟执行，在浏览器看起来的效果像是将脚本放在了 body后面一样（虽然按规范应该是在 DOMContentLoaded事件前，但实际上不同浏览器的优化效果不一样，也有可能在它后面）
浅谈script标签中的async和defer
weixin_33849942的博客
10-17 302
script标签用于加载脚本与执行脚本，在前端开发中可以说是非常重要的标签了。直接使用script脚本的话，html会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的DOM渲染。 现在大家习惯于在页面中引用各种的第三方脚本，如果第三方服务商出现了一些小问题，比如延迟之类的，就会使得页面白屏。好在script提供了两种方式...
async、defer 的区别是什么？
最新发布
王飞
09-28 537
了解 async、defer 的区别之前我们需要了解 JavaScript 的加载时间线，JavaScript 在网页加载过程中对页面的性能以及用户体验有着至关重要的影响。
js中defer和async的区别
越努力，越幸运！
06-30 5935
js中defer和async学习总结
【JavaScript】defer和async的区别
'Ablaze 的专栏
04-16 849
转载自：https://segmentfault.com/q/1010000000640869 先来试个一句话解释仨，当浏览器碰到 script 脚本的时候： &lt;script src="script.js"&gt;&lt;/script&gt; 没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不...
js之script属性async与defer
weixin_30624825的博客
01-20 118
概念 默认情况下js的脚本执行是同步和阻塞的，但是 <script> 标签有 defer 和 async 属性, 这可以改变脚本的执行方式，这些都是布尔类型了，没有值，只需要出现在 <script> 标签里即可。 如： 还要注意一点，html5说这些属性只在和src属性联合使用时才有效。 如果同时指定了两个属性，则会遵从async属性而忽略...
JavaScript中defer和async的区别
qq_35464701的博客
12-04 109
JavaScript中defer和async的区别 　　把 JavaScript 插入到 HTML 页面中要使用defer是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。浏览器渲染页面，读取到包含defer属性的外部async浏览器立即异步下载文件，不同于defer得是，下载完成会立即执行，此时会阻塞dom渲染，所以async的script最好不要操作dom。因为是下载完立即执行，不能保证多个加载时的先后顺序。 ...
浅谈HTML5 defer和async的区别
09-28
理解`defer`和`async`的区别很重要，因为它们影响到脚本的加载和执行策略。通常，将`defer`用于那些不依赖于文档解析顺序的脚本，`async`用于完全独立的脚本，而无`defer`或`async`的脚本则应尽可能优化以减少阻塞...
script标签里的defer和async的区别
FE攻城狮
11-02 313
1、没有 defer 或 async &lt;script src="script.js"&gt;&lt;/script&gt; 浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。 2、有 async &lt;script async src="script.js"&gt;&lt;/scr...
js defer和async的区别
baidu_39305094的博客
03-12 939
当浏览器碰到script脚本的时候： &lt;script src="script.js"&gt;&lt;/script&gt; 没有defer或async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。 &lt;script async src="script.js...
async和defer的区别?
qq_44621394的博客
08-26 4326
async和defer的异同主要是因为他们的加载和执行时机。普通的script(不使用async和defer)加载完会立即执行,会阻塞script标签下面的资源加载和dom的解析使用async后,script加载完后会立即执行。(网络)资源的加载过程是异步的,不会阻塞后续资源的加载dom和解析。使用defer后,script异步加载,html解析之后执行、DomContentLoaded之前执行。通常情况下defer的使用频率较高,它能保证script之间的变量依赖。...
defer和async的区别？
weixin_45345234的博客
01-17 766
选择async还是defer取决于你的需求。如果脚本之间没有依赖关系，并且它们的执行顺序不重要，那么可以使用async。如果你希望按照它们在文档中的顺序执行，而不阻塞页面解析，那么可以使用defer。
async和defer的区别
......
06-17 472
两者的差别：在于脚本下载完之后何时执行。defer是立即下载但延迟执行，加载后续文档元素的过程将和脚本的加载并行进行（异步），但是脚本的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。async是立即下载并执行，加载和渲染后续文档元素的过程将和js脚本的加载与执行并行进行（异步）。 ...
javascript中defer和async 区别
sunsineq的专栏
06-28 228
defer和async 区别 <script src="script.js"></script> 1.没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。 <script async src="script.js"></script> 2.有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执
1.async和defer的区别
weixin_70755082的博客
06-20 1909
/以二进制解析，运算过程：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。
async 和 defer 的区别
weixin_34235105的博客
04-11 101
　　摘自： 　　　　https://blog.csdn.net/liuhe688/article/details/51247484 　　　　https://segmentfault.com/q/1010000000640869 　　　　https://www.cnblogs.com/leungUwah/p/6480868.html async 和defer 的区别 在开发...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值