async属性诞生的初衷是什么？ - Riesenzahn - 沸点 - 掘金

1年前

async属性诞生的初衷是什么？
`async` 属性的诞生是为了优化网页的加载性能，尤其是当网页中包含多个外部 JavaScript 文件时。传统的 `<script>` 标签会阻塞页面的渲染，直到脚本下载和执行完成，这会导致用户体验下降。以下是 `async` 属性的主要初衷和优点：

### 1. 非阻塞加载

使用 `async` 属性，浏览器可以在下载 JavaScript 文件时继续渲染页面，避免了脚本阻塞渲染。这意味着即使脚本正在加载，用户也可以看到页面的其余部分，提升了页面的响应速度。

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

### 2. 并行下载

`async` 属性允许浏览器并行下载多个脚本，而不需要等到前一个脚本执行完成。这种并行处理大大减少了页面加载时间，特别是在包含多个外部脚本的情况下。

### 3. 执行顺序

带有 `async` 属性的脚本在下载完成后立即执行，不会按照在文档中定义的顺序执行。这意味着如果有多个带有 `async` 的脚本，它们的执行顺序是不可预测的。因此，通常建议在脚本中不依赖于其他脚本的执行顺序。

### 4. 适合独立脚本

`async` 属性适合那些不依赖于其他脚本的独立脚本，如分析工具、广告脚本等。这些脚本可以在页面渲染的同时加载，并且其执行不会影响页面的主要功能。

### 5. 提高用户体验

综上所述，通过使用 `async` 属性，开发者可以大幅度提高网页的加载速度和用户体验。用户可以更快地看到页面内容，减少了因脚本加载造成的等待时间。

### 总结

`async` 属性的出现旨在解决传统脚本加载方式的性能瓶颈，提升网页的加载效率和用户体验。随着现代网页应用对性能的要求不断提高，`async` 属性成为了前端开发中不可或缺的优化手段之一。

展开

今天学到了