defer和async的区别

Meathill 发布于2019-08-26 13:39 / 1839人阅读

摘要：有，加载和渲染后续文档元素的过程将和的加载与执行并行进行异步。接着，我们来看一张图咯蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的绿色线代表解析。

文章来源 n͛i͛g͛h͛t͛i͛r͛e͛ 大佬的回答

先来试个一句话解释仨，当浏览器碰到 script 脚本的时候：

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

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

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

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

接着，我们来看一张图咯：

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

此图告诉我们以下几个要点：

defer 和 async 在网络读取（下载）这块儿是一样的，都是异步的（相较于 HTML 解析）
它俩的差别在于脚本下载完之后何时执行，显然 defer 是最接近我们对于应用脚本加载和执行的要求的
关于 defer，此图未尽之处在于它是按照加载顺序执行脚本的，这一点要善加利用
async 则是一个乱序执行的主，反正对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行
仔细想想，async 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的，最典型的例子：Google Analytics

idc机房托管服务器托管 promise_deferred区别宽带和专线的区别专线和宽带的区别空间和域名的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109234.html

拒绝js阻塞—defer、async作用和区别分析

摘要：阻塞原理浏览器内核可以分成两部分渲染引擎或者和引擎。等引擎运行完毕，浏览器又会把控制权还给渲染引擎，继续和的构建。执行时，解析暂停。从加载完成立即执行来看，模式执行顺序与写的顺序无关，不保证执行顺序。 js阻塞原理浏览器内核可以分成两部分：渲染引擎（Layout Engine 或者 Rendering Engine）和 JS 引擎。早期渲染引擎和 JS 引擎并没有十分明确的区分，但随...

wuaiqiu 2019-08-23 13:52 评论0 收藏0
Script标签和脚本执行顺序 - 文档加载 - 面向浏览器编程

摘要：相关脚本会立即下载并执行。从上面两个例子，可以充分了解到标签的柱塞式执行。表示该标签并不柱塞，也不同步执行。属性带有属性的脚本，同样会推迟脚本的执行，并且不会阻止文档解析。同时，带有的脚本彼此之间，能保证其执行顺序。原文： http://pij.robinqu.me/Browser_Scripting/Document_Loading/ScriptTag.html 源...

cangck_X 2019-08-19 14:49 评论0 收藏0
详解 DOMContentLoaded

摘要：详解首先我们先直观地感受下什么是。另外，脚本的执行顺序与定义时的位置有关。脚本加载完成后，文档停止解析，脚本执行，执行结束后文档继续解析。在构建完毕，脚本执行完成之后，事件触发。详解 DOMContentLoaded 首先我们先直观地感受下什么是 DOMContentLoaded。打开 Chrome DevTools，切到 Network 面板，重新加载网页，得到如下截图： show...

MingjunYang 2019-08-05 10:58 评论0 收藏0
Sdk加载阻塞页面渲染问题的总结

摘要：由于始终没有还原阻塞时的情形，无法截图。写模拟场景，由于当时的场景是外链是加载阻塞，而不是执行阻塞，暂时没有有效模拟。但是可以确定的是，使用或可以有效解决，外链阻塞内部执行的问题。由于始终没有还原阻塞时的情形，无法截图。在正常情况下，是无法区别是否使用defer的区别的。后续看一下是否能模拟场景。写demo模拟场景，由于当时的场景是外链是js加载阻塞，而不是js执行阻塞，暂时没有有效...

AlphaGooo 2019-08-23 14:17 评论0 收藏0
DOM中的各种区别小节

摘要：欢迎光临小弟博客我的博客原文中的各种区别小节参考普通添加事件和事件绑定的事件监听与捕获和冒泡和的区别相信大家在DOM的实际开发与学习过程中，肯定也遇到不少需要比较的东西，这里我主要列比较以下几点，更多的区别和总结，希望想到和遇到的朋友给我留言哦。 clientHeight/scrollHeight/offsetHeight defer vs async 事件模型-捕获/目标/冒泡...

Guakin_Huang 2019-08-22 10:56 评论0 收藏0