一图看懂 script 标签中 defer 和 async 的区别

最新推荐文章于 2025-06-11 22:04:32 发布
最新推荐文章于 2025-06-11 22:04:32 发布
阅读量514 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43967603/article/details/106309099
本文详细解析了浏览器在渲染过程中如何处理JS文件，包括JS的加载、解析与执行如何阻塞文档解析，以及如何通过使用defer和async属性来实现JS的异步加载，提升首屏渲染速度。

浏览器渲染过程中遇到 JS 文件怎么处理？

  JavaScript 的加载、解析与执行会 阻塞文档的解析，也就是说，在构建 DOM 时，HTML 解析器若遇到了 JavaScript，那么它会暂停文档的解析，将控制权移交给 JavaScript 引擎，等 JavaScript 引擎运行完毕，浏览器再从中断的地方恢复继续解
析文档。

  也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件，这也是都建议将 script 标签放在 body 标签底部的原因。当然在当下，并不是说 script 标签必须放在底部，因为你可以给 script 标签添加 defer 或者 async 属性。


在这里插入图片描述
解析 HTML 用的是 GUI渲染线程，执行 js 代码用的是 js引擎线程
这两个线程互斥，即当js引擎线程运行时，GUI线程会被挂起，当js引擎线程结束运行时，才会继续运行GUI线程，所以 HTML 的解析 和 js 的执行不能同时进行


相同：async 和 defer 都能实现 Script 的 异步加载 不同： 执行时机不一样， async 在加载 script 后立刻执行，defer 在 DOM 解析完成后执行 因为 是与 HTML 同时异步加载，所以 script 中需要获取 DOM元素还是要在 DOMContentLoaded 事件回调中获取

文章参考：https://segmentfault.com/q/1010000000640869

【白嫖党】如何把前端学好？看完这篇，直呼：太强了！（历经半个月之作）
超逸の学习技术博客
04-04 2万+
很少有文章做到将知识形成一个体系，于是需要翻阅很多资料，但这篇文章做到了！共34815字数。
面试官：说一下script 标签中 defer（推迟） 和 async（异步） 的区别
upgrade_bro的博客
08-14 4728
script 标签中 defer 和 async 的区别：“在解析HTML文档过程中，defer和async标注的脚本都会立即下载。不同的是……”
script标签中defer和async的区别
我的博客简介
02-21 1264
而如果脚本之间没有依赖关系，可以并行加载和执行，并且在加载完成后立即执行，则可以使用。蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的;绿色线代表 HTML 解析。综上所述，如果需要按照特定顺序加载和执行脚本并确保在文档解析完毕后执行，可以使用。标签中控制脚本加载和执行的属性。
＜script＞ 标签的 async 与 defer 属性详解
最新发布
sinat_33255495的博客
06-11 459
使用 async 和 defer 属性的脚本都是异步加载的，都不会阻塞 HTML 文档的解析，但是他们的执行时机是不同的，下面来详细说明一下。
script标签async和defer的区别及作用
dc1339485的博客
04-30 411
作用： 1.没有 defer 或 async，浏览器会立即加载并执行指定的脚本，也就是说不等待后续载入的文档元素，读到就加载并执行。 2.async 属性表示异步执行引入的 JavaScript，与 defer 的区别在于，如果已经加载好，就会开始执行——无论此刻是 HTML 解析阶段还是 DOMContentLoaded 触发之后。需要注意的是，这种方式加载的 JavaScript...
JS中script标签defer和async属性的区别
StarFishing
11-30 4858
向html页面中插入javascript代码的主要方法就是通过script标签。其中包括两种形式，第一种直接在script标签之间插入js代码，第二种即是通过src属性引入外部js文件。由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染，对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟，为了避免这个问题，建议把全部的js引用放在标签之前。 script标签存在两个属性，def...
script 标签中 defer 和 async 的区别
发果叁
08-17 645
script 是会阻碍 HTML 解析的，只有下载好并执行完脚本才会继续解析 HTML下载此类脚本都不会阻止页面呈现（异步加载），区别在于：1.async 执行与文档顺序无关，先加载哪个就先执行哪个；defer会按照文档中的顺序执行2.async 脚本加载完成后立即执行，可以在DOM尚未完全下载完成就加载和执行；而defer脚本需要等到文档所有元素解析完成之后才执行。...
JavaScript练手小技巧：一文看懂＜script＞标签的 ansyc 和 defer
九天翔龙的技术博客
03-02 515
所以，JS 代码的位置，个人建议放到 body 标签的最后，HTML内容的后面。不用纠结给 script 标签添加 defer 还是 ansyc 属性。
对CommonJS,AMD,CMD规范以及script标签异步加载的理解
飞驰的地铁
05-19 1609
1.牢骚 CommonJS, AMD, CMD , 其实很早就接触过了。 当时, 网上的文章看得眼花缭乱, 只依稀记得几个模糊的概念。 什么依赖前置 , 什么按需加载。 一头雾水。 现在再回过头来看看概念 , 网上部分文章用词模棱两可。 给我们这些菜鸡, 带来了理解的偏差和困惑。 记得第一个项目还用了requireJS 。 时过境迁，现在入门前端 , 都是直接上webpack了 。 但...
知识梳理——JavaScript
wytraining
03-14 1507
1. 说说前端中的事件流 HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件onclick、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。 什么是事件流：事件流描述的是从页面中接收事件的顺序. DOM2级事件流包括下面几个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段 addEventListener：addEventListener 是DOM2 级事件新增的指定事件处
从源码看无界 1.0.28：为何说它是 qiankun 的 “轻量化替代方案”（二）
vv_bug
04-14 949
可以看到，首先调用了createWujieWebComponent 方法注册了一个自定义元素 wujie-app，那么有小伙伴要问了，这个 “wujie-app” 元素到底是啥？/*** 定义 wujie webComponent，将shadow包裹并获得dom装载和卸载的生命周期*/// 为自定义元素附加一个 Shadow DOM，实现样式和结构的封装sandbox?.unmount();
script标签中async与defer的区别
m0_53001289的博客
02-24 393
async：他是异步加载，不确定何时会加载好；页面加载时，带有 async 的脚本也同时加载，加载好后会立即执行，如果有一些需要操作 DOM 的脚本加载比较慢时，这样会造成 DOM 还没有加载好，脚本就进行操作，会造成错误。defer：页面加载时，带有 defer 的脚本也同时加载，加载后会等待 页面加载好后，才执行。script 标签有2个属性 async（异步） 和 defer（推迟）；
script标签的defer和async的区别是什么？
qq_43393963的博客
09-25 2839
摘自《JavaScript高级程序设计》 1. defer属性 HTMI4.01为<script>标签定义了defer属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。 因此，在<script>元素中设置 defer属性， 相当于告诉浏览器立即下载，但延迟执行。 <!DOCTYPE html> &...
script标签中的defer和async属性的区别？
keleqy的博客
07-23 415
script 标签一般用于加载js脚本，我们知道js脚本是阻塞式加载和执行的，即页面解析到 script 标签时会暂停页面的解析，先加载脚本并执行脚本后再继续页面的解析。 而H5新增的两个属性： defer 和 async，可以让脚本异步叫载，但脚本的执行方式有所不同， defer 是延迟的意思，所以脚本会在页面加载结束的再执行，而 async 是异步的意思，脚本只会异步加载，并立即执行。 页面的加载、脚本加载荷脚本执行示意图如下所示： 总结来说就是， defer 和 async 属性让 scri..
script标签中的async和defer
weixin_33923762的博客
09-02 135
　　在程序中代码是一行一行执行的，html标签都是由渲染引擎来执行，代码执行时从上往下一行一行执行，当执行到alert（如下图），alert会阻塞后面代码的执行，当点击完确定之后，代码继续往下执行。 　　javascript的内容同样可在外部进行引用，如下图所示，正常情况下执行结果和上面的内容相同，但当我们给html的script标签中加入async或者defer属性时，代码的执行过程也将会...
script标签中defer和async属性的区别
lengye7的博客
01-28 2149
转载自：https://www.cnblogs.com/neusc/archive/2016/08/12/5764162.html 这篇文章来源于JS高级程序设计第三版中关于script标签的介绍，结合查阅的资料写下的学习笔记。 　　向html页面中插入javascript代码的主要方法就是通过script标签。其中包括两种形式，第一种直接在script标签之间插入js代码，第二种即是通过sr...
script标签里的async和defer有什么区别？
qq_48763502的博客
10-02 584
属性加载方式执行方式执行顺序适用场景defer在后台加载，不阻塞 HTML 解析文档解析完成后按顺序执行保证顺序依赖 DOM 的脚本async立即加载，不阻塞 HTML 解析下载完成后立即执行不保证独立脚本（如分析工具、广告）
script 标签中 defer 和 async 区别？
03-21
### HTML `script` 标签中 `defer` 与 `async` 属性的区别及用法 #### 基本定义 在 JavaScript 中，`<script>` 标签用于引入外部 JavaScript 文件或包含嵌入式 JavaScript 代码。为了优化页面加载性能并控制脚本的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值