JS中【async】和【defer】属性详解与区别

理解浏览器如何处理JavaScript以及相关的async和defer属性对于前端开发是非常重要的。以下是相关知识点的详细讲解：

1. 浏览器的解析和渲染过程

浏览器在加载网页时，会按照以下步骤解析和渲染内容：

1. HTML解析: 浏览器从顶部开始逐行解析HTML文件，生成DOM树（Document Object Model），代表页面的结构。

2. CSS解析: 同时，浏览器会解析CSS文件和内联样式，生成CSSOM（CSS Object Model），代表页面的样式。

3. JavaScript执行: 当解析器遇到<script>标签时，默认会暂停HTML的解析和渲染，去执行脚本中的JavaScript代码。

4. 页面渲染: 解析完所有内容并执行完所有脚本后，浏览器根据DOM树和CSSOM树渲染出页面。

2. 为什么JavaScript脚本会阻塞解析

JavaScript脚本可能会操作DOM或者改变页面内容，比如添加或删除元素、改变样式等。为了确保这些操作的正确性，浏览器在遇到<script>标签时会暂停HTML的解析。这样可以保证：

• 顺序执行: 浏览器会严格按照脚本在HTML中的顺序来执行JavaScript代码，确保脚本间的依赖关系。

• 页面一致性: 在脚本执行完成之前暂停解析可以防止在HTML文档解析的过程中发生不一致的情况。例如，如果脚本在解析过程中插入新元素，暂停解析可以确保这些新元素被正确处理。

3. async和defer属性

为了优化页面加载性能，HTML5引入了async和defer属性，用于控制脚本的加载和执行行为。

async 属性

• 加载方式: 使用async属性的脚本是异步加载的，这意味着脚本会在后台加载，不会阻塞HTML文档的解析。
• 执行时机: 一旦脚本加载完成，浏览器会立即执行它，这可能在HTML文档的解析完成之前。因此，async脚本的执行顺序无法保证，脚本之间也不应有依赖。
• 适用场景: 适用于独立的脚本，比如广告、数据统计脚本，这些脚本不依赖于其他内容，也不改变页面结构。

<script src="script.js" async></script>

defer 属性

• 加载方式: 使用defer属性的脚本也是异步加载的，类似于async，它们不会阻塞HTML文档的解析。
• 执行时机: 与async不同，defer脚本会在HTML文档完全解析完毕后按顺序执行。这意味着即使脚本加载完成，它们也会等到文档解析结束才执行。
• 适用场景: 适用于需要确保脚本顺序或依赖于整个文档的脚本。defer脚本通常用于初始化页面的JavaScript代码。

<script src="script.js" defer></script>

4. async与defer的区别

特性	async	defer
加载方式	异步	异步
执行时机	加载完成后立即执行	HTML解析完成后按顺序执行
执行顺序	不保证顺序	保证顺序
适用场景	独立脚本	依赖脚本或初始化脚本

5. 使用示例

<!-- 使用async加载并执行独立的统计脚本 -->
<script src="analytics.js" async></script>

<!-- 使用defer加载并按顺序执行页面初始化脚本 -->
<script src="init1.js" defer></script>
<script src="init2.js" defer></script>

6. 总结

• 浏览器在遇到<script>标签时会暂停HTML文档解析以执行JavaScript，这是为了保证文档加载和脚本执行的一致性。
• async属性允许脚本在后台异步加载和立即执行，适用于独立、不依赖其他脚本的场景。
• defer属性也允许脚本异步加载，但会在HTML解析完成后按顺序执行，适用于有依赖关系或初始化的场景。

使用async和defer可以优化页面加载性能，减少阻塞时间，提供更好的用户体验。理解它们的区别和应用场景可以帮更好地控制页面的加载行为。