HTML5 defer 与 async：让你的网页飞起来，告别JavaScript阻塞的烦恼
想象一下，你精心打扮，约了心仪的姑娘/小伙去一家网红餐厅。结果到了门口，发现服务员慢悠悠地给你安排座位，点了菜等了半天也不上，隔壁桌都吃完两轮了，你的菜还在后厨排队。是不是瞬间心情就不美丽了？
网页加载也是一样。用户兴致勃勃地打开你的网站，结果页面卡在那里，文字内容半天刷不出来，转圈圈的小图标转得眼花缭乱。罪魁祸首很可能就是JavaScript脚本阻塞了页面的渲染。
别担心，HTML5提供了两大法宝：defer 和 async，它们就像餐厅的VIP通道和自动上菜机，能让你的网页加载速度瞬间提升，给用户带来丝滑般的体验。
一、为什么JavaScript会阻塞页面渲染？
要理解defer和async的作用，我们先要搞清楚JavaScript为什么会阻塞页面渲染。
浏览器解析HTML代码的过程，就像一个辛勤的建筑工人，一步一个脚印地把房子的骨架搭建起来。它会从上到下，一行一行地解析HTML代码，构建DOM树（Document Object Model，文档对象模型）。DOM树就像房子的骨架，定义了网页的结构。
当浏览器遇到<script>标签时，默认会暂停解析HTML，先下载并执行JavaScript代码。只有JavaScript代码执行完毕后，浏览器才会继续解析HTML。这就像建筑工人突然放下手里的砖头，跑去组装一个玩具机器人，组装完才能继续盖房子。
如果JavaScript代码很复杂，或者需要从外部服务器下载，那么这个等待时间就会很长，用户看到的页面就会一片空白，或者只显示一部分内容，体验非常糟糕。
二、defer：优雅的延迟加载策略，保证脚本执行顺序
defer属性告诉浏览器：“嘿，这个JavaScript脚本比较重要，但不是立刻就要用的。你先别管它，继续解析HTML，把页面的骨架搭好。等整个HTML文档都解析完毕后，再回来执行这个脚本。”
这就像餐厅的服务员告诉你：“不好意思，现在比较忙，您先在休息区看看菜单，等座位准备好了我再来叫您。”
defer的特点：
- 延迟执行： 脚本会延迟到整个HTML文档解析完毕后才执行。
- 保证顺序： 如果有多个带有
defer属性的脚本，它们会按照在HTML文档中出现的顺序依次执行。 - 不阻塞渲染： 浏览器在下载
defer脚本时，不会停止解析HTML，页面可以继续渲染。
defer的适用场景：
defer非常适合那些依赖于DOM结构的脚本，比如修改页面内容、添加事件监听器等。它能保证脚本在DOM树构建完成后执行，避免出现“脚本找不到元素”的错误。
举个例子：
<!DOCTYPE html>
<html>
<head>
<title>Defer示例</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p id="message">这是一个示例段落。</p>
<script defer src="script1.js"></script>
<script defer src="script2.js"></script>
</body>
</html>假设script1.js和script2.js的内容如下：
// script1.js
document.getElementById("message").textContent = "Hello, world!";
console.log("script1.js executed");// script2.js
console.log("script2.js executed");在这个例子中，浏览器会先解析HTML，显示标题和段落。然后，它会下载script1.js和script2.js，但不会立即执行。等到整个HTML文档解析完毕后，浏览器才会按照script1.js、script2.js的顺序依次执行它们。最终，页面上的段落内容会被修改为“Hello, world!”，控制台会输出两条日志。
三、async：风风火火的异步加载策略，谁先下载完就先执行
async属性告诉浏览器：“嘿，这个JavaScript脚本不太重要，你不用等我，一边下载一边解析HTML，下载完了就立刻执行，不用管其他脚本。”
这就像餐厅的自动上菜机，菜做好了就直接送到你面前，不用管其他桌的菜是不是还没做好。
async的特点：
- 异步执行： 脚本会异步下载，不会阻塞HTML解析。
- 不保证顺序： 如果有多个带有
async属性的脚本，它们会按照下载完成的顺序执行，而不是按照在HTML文档中出现的顺序。 - 下载完立即执行： 脚本下载完成后，会立即执行，可能会中断HTML解析。
async的适用场景：
async非常适合那些不依赖于DOM结构，也不依赖于其他脚本的独立脚本，比如统计分析代码、广告代码等。
举个例子：
<!DOCTYPE html>
<html>
<head>
<title>Async示例</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p id="message">这是一个示例段落。</p>
<script async src="script1.js"></script>
<script async src="script2.js"></script>
</body>
</html>假设script1.js和script2.js的内容与上面的例子相同。
在这个例子中，浏览器会先解析HTML，显示标题和段落。然后，它会异步下载script1.js和script2.js。哪个脚本先下载完成，就先执行哪个脚本。执行脚本的时候，可能会中断HTML解析。由于script1.js修改了页面内容，如果它在DOM树构建完成之前执行，可能会导致“找不到元素”的错误。
四、defer vs async：傻傻分不清？一张表格帮你理清思路
| 特性 | defer |
async |
|---|---|---|
| 执行时机 | HTML文档解析完毕后执行 | 下载完成后立即执行，可能会中断HTML解析 |
| 执行顺序 | 按照在HTML文档中出现的顺序依次执行 | 按照下载完成的顺序执行，不保证顺序 |
| 阻塞渲染 | 不阻塞渲染 | 下载过程中不阻塞渲染，执行过程中可能会阻塞渲染 |
| 适用场景 | 依赖于DOM结构，需要按顺序执行的脚本 | 不依赖于DOM结构，不需要按顺序执行的独立脚本 |
五、选择困难症？教你如何选择defer和async
选择defer还是async，就像选择午餐吃米饭还是面条，取决于你的具体需求。
- 如果你的脚本依赖于DOM结构，或者需要按顺序执行，那么选择
defer。 就像你需要先有房子骨架，才能往里面添置家具一样。 - 如果你的脚本不依赖于DOM结构，也不需要按顺序执行，那么选择
async。 就像你饿了，随便吃点零食垫垫肚子一样。 - 如果你实在不知道该选哪个，那么优先选择
defer。defer通常是更安全的选择，因为它能保证脚本在DOM树构建完成后执行，避免出现各种奇怪的问题。
六、最佳实践：让你的网页加载速度更上一层楼
除了使用defer和async之外，还有一些其他的技巧可以帮助你提高网页加载速度：
- 压缩JavaScript代码： 减少JavaScript文件的大小，可以加快下载速度。
- 使用CDN： 将JavaScript文件放在CDN（Content Delivery Network，内容分发网络）上，可以利用CDN的全球加速节点，加快用户访问速度。
- 减少HTTP请求： 尽量将多个JavaScript文件合并成一个，减少HTTP请求的数量。
- 优化JavaScript代码： 避免使用复杂的算法和循环，减少JavaScript代码的执行时间。
七、总结：掌握defer和async，成为网页性能优化大师
defer和async是HTML5提供的两个强大的属性，它们可以帮助你优化JavaScript脚本的加载，提高网页加载速度，改善用户体验。
记住，选择defer还是async，取决于你的具体需求。理解它们的特点，并结合最佳实践，你就能成为网页性能优化大师，让你的网页飞起来！
希望这篇文章能让你对defer和async有更深入的了解。下次再遇到JavaScript阻塞页面渲染的问题，你就能胸有成竹地拿出这两大法宝，轻松解决问题，让你的用户对你的网站刮目相看！
最后，祝你写出高性能、高颜值的网页，早日走上人生巅峰！