JavaScript中defer和async的区别
在 JavaScript 中，defer 和 async 是用于控制外部脚本加载和执行行为的两个属性，通常用于 <script> 标签中。它们的主要区别在于脚本的加载和执行时机。
- 普通
<script>标签
默认情况下，浏览器在解析 HTML 时遇到 <script> 标签会立即停止 HTML 解析，下载并执行脚本，然后再继续解析 HTML。
<script src="script.js"></script>
- 缺点：会阻塞 HTML 解析，影响页面加载性能。
defer属性
defer 属性告诉浏览器立即下载脚本，但延迟到 HTML 解析完成后再执行脚本。
<script defer src="script.js"></script>
特点：
- 加载：立即下载脚本，但不会阻塞 HTML 解析。
- 执行：在 HTML 解析完成后，按照脚本在文档中的顺序依次执行。
- 适用场景：适用于需要操作 DOM 或依赖其他脚本的脚本文件。
示例
<!DOCTYPE html>
<html>
<head>
<script defer src="script1.js"></script>
<script defer src="script2.js"></script>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
script1.js和script2.js会在 HTML 解析完成后按顺序执行。
async属性
async 属性告诉浏览器立即下载脚本，并在下载完成后立即执行脚本，同时可能会中断 HTML 解析。
<script async src="script.js"></script>
特点：
- 加载：立即下载脚本，不会阻塞 HTML 解析。
- 执行：脚本下载完成后立即执行，可能会中断 HTML 解析。
- 执行顺序：脚本的执行顺序不确定，取决于下载完成的顺序。
- 适用场景：适用于独立的脚本，如统计分析、广告脚本等。
示例
<!DOCTYPE html>
<html>
<head>
<script async src="script1.js"></script>
<script async src="script2.js"></script>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
script1.js和script2.js的下载和执行顺序不确定。
defer和async的区别
| 特性 | defer | async |
|---|---|---|
| 加载时机 | 立即下载，不阻塞 HTML 解析 | 立即下载，不阻塞 HTML 解析 |
| 执行时机 | HTML 解析完成后，按顺序执行 | 下载完成后立即执行，顺序不确定 |
| 阻塞 HTML 解析 | 不会阻塞 | 可能会阻塞 |
| 适用场景 | 依赖 DOM 或其他脚本的脚本 | 独立的脚本 |
- 使用建议
- 如果脚本需要操作 DOM 或依赖其他脚本，使用
defer。 - 如果脚本是独立的（如统计分析、广告脚本），使用
async。 - 如果脚本很小且对页面加载性能影响不大，可以不使用
defer或async。
- 示例对比
使用 defer
<!DOCTYPE html>
<html>
<head>
<script defer src="script1.js"></script>
<script defer src="script2.js"></script>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
script1.js和script2.js会在 HTML 解析完成后按顺序执行。
使用 async
<!DOCTYPE html>
<html>
<head>
<script async src="script1.js"></script>
<script async src="script2.js"></script>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
script1.js和script2.js的下载和执行顺序不确定。
总结
defer：延迟执行，按顺序执行，适合依赖 DOM 的脚本。async：异步执行，顺序不确定，适合独立的脚本。- 根据脚本的具体需求选择合适的属性，可以优化页面加载性能。
更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github
