我的小程序
指尖闲置
指尖壁纸
指尖卡路里
指尖待办
每日一笑
理想是火，点燃熄灭的灯。
随机推荐
标签云
我和我家宝
我们相恋了：
10000年
10000年
重学js之script标签属性defer/async
技术 32 2025-09-24 09:47
接上次的文章，
当用户在地址栏输入链接，并按下enter后
dns解析=》tcp链接=》发起get/post请求
获取到站点返回的html=》开始逐步解析并渲染页面
那么解析到head标签中的script标签是啥样子具体的顺序呢，又如何控制的顺序呢
这里涉及到script的两个属性值，async,defer
边看代码先分析
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Script Loading Demo</title> <!-- CSS 下载并行，不阻塞解析 --> <link rel="stylesheet" href="style.css"> <!-- 普通 script：阻塞解析 --> <script src="normal.js"></script> <!-- defer：异步下载，DOM 完成后按顺序执行 --> <script defer src="defer1.js"></script> <script defer src="defer2.js"></script> <!-- async：异步下载，下载完成立即执行 --> <script async src="async1.js"></script> <script async src="async2.js"></script> </head> <body> <h1>Page Start</h1> <p>Check the console to see execution order.</p> <!-- 图片异步加载 --> <img src="image1.png" alt="Image 1"> <img src="image2.png" alt="Image 2"> <div id="app">Hello World</div> </body> </html>
normal 下载完成后直接执行，阻塞后面dom的解析和渲染
defer1和defer2 下载时不会阻塞dom的解析和渲染，并且下载完成后会等dom渲染完成后才会按照从上到下的顺序依次执行
async1和async2 下载时同时也不会阻塞dom的解析和渲染，但是他下载完成后会立刻执行，执行的时候会阻塞dom的解析和渲染，同时开始，完成插队
总结就是
defer：解析 + 下载 + 渲染并行，执行必须等待 DOM 构建完成后才开始，按脚本顺序执行。
async：解析和下载+渲染同时进行，等下载完成后立马执行，但是执行的时候会阻塞正在解析的渲染
普通的：下载和执行都阻塞 DOM 解析，遇到就停，下载 + 执行 = DOM 堵车
补充：
浏览器下载资源的并行策略
- 普通
<script>（非 async/defer）
- 解析到
<script>→ 浏览器暂停 DOM 解析 - 下载脚本（阻塞解析，但浏览器会尽量并行下载 其他非阻塞资源，比如 CSS、图片、async/defer JS）
- 执行脚本 → 解析继续
- CSS / async / defer JS / 图片 /媒体资源
- 并行下载，不会排队等待前一个资源下载完成
- 浏览器通常有 并行下载上限（同域名一般 6-8 个连接），超过上限就排队
浏览器对并行下载的连接数有限制:
HTTP/1.1 限制
- 浏览器对同一个域名的并发连接数有限（通常 6-8 个）
- 比如你同时有 20 个图片和 5 个 CSS 文件，浏览器会排队，先下载 6-8 个，等某个完成了再下载下一个
HTTP/2 优化
- HTTP/2 可以复用一个连接并行传输多个资源，限制就不那么严格了
- 但是浏览器还是会有一些策略控制优先级（script > CSS > 图片）
资源优先级策略
- 浏览器会优先下载阻塞渲染的 CSS 和普通 script
- async/defer JS、图片等优先级低一些，所以可能“延迟”下载
- 因此我们说“尽量并行”，实际是并行下载，但顺序和速度可能受限
作者: Bill 本文地址: http://biaoblog.cn/info?id=1758678442695
版权声明: 本文为原创文章，版权归 biaoblog 个人博客 所有，欢迎分享本文，转载请保留出处，谢谢！
上一篇：没有了