重学js之script标签属性defer/async
重学js之script标签属性defer/async
biaoblog.cn 个人博客
发布于 2025-09-25 09:06:35
发布于 2025-09-25 09:06:35
代码可运行
运行总次数：0
代码可运行
接上次的文章，
当用户在地址栏输入链接，并按下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、图片等优先级低一些，所以可能“延迟”下载
- 因此我们说“尽量并行”，实际是并行下载，但顺序和速度可能受限
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
