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

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

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

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

HTML解析: 浏览器从顶部开始逐行解析HTML文件，生成DOM树（Document Object Model），代表页面的结构。
CSS解析: 同时，浏览器会解析CSS文件和内联样式，生成CSSOM（CSS Object Model），代表页面的样式。
JavaScript执行: 当解析器遇到<script>标签时，默认会暂停HTML的解析和渲染，去执行脚本中的JavaScript代码。
页面渲染: 解析完所有内容并执行完所有脚本后，浏览器根据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>