揭开 script async 与 defer 的神秘面纱，助您提升前端性能

如今，随着网络技术的飞速发展，用户对于网页加载速度的要求越来越高，为了满足用户的需求，我们必须想办法优化网页加载速度。而 JavaScript 脚本往往是网页中加载的最后一种资源，并且 JavaScript 脚本的执行会阻塞后续资源的加载，因此优化 JavaScript 脚本的加载方式对于提升网页性能至关重要。

在 HTML 文档中，我们可以通过 <script> 标签来加载 JavaScript 脚本，而 <script> 标签有 async 和 defer 两个属性，它们可以影响 JavaScript 脚本的加载和执行方式。

async 属性

async 属性表示 JavaScript 脚本可以异步加载，也就是说脚本会立即加载，但不阻塞后续资源的加载。当脚本加载完成后，它就会立即执行，而不管其他资源是否已经加载完成。

defer 属性

defer 属性表示 JavaScript 脚本可以延迟加载，也就是说脚本会等到 HTML 文档解析完成后再加载。当脚本加载完成后，它就会立即执行，但它必须等到所有其他资源都加载完成后才能执行。

script async 与 script defer 的区别

特点	script async	script defer
加载时机	立即加载	延迟加载
执行时机	脚本加载完成后立即执行	脚本加载完成后立即执行，但必须等到所有其他资源都加载完成后才能执行
阻塞后续资源的加载	不阻塞	不阻塞
执行顺序	无序	有序

何时使用 script async 与 script defer

• 如果 JavaScript 脚本不需要与其他资源交互，那么可以使用 script async。例如，如果 JavaScript 脚本只是用于统计网站流量，那么就可以使用 script async。
• 如果 JavaScript 脚本需要与其他资源交互，那么可以使用 script defer。例如，如果 JavaScript 脚本用于操作 DOM 元素，那么就需要使用 script defer。

使用 script async 与 script defer 的注意事项

• 如果使用了 script async，那么需要确保 JavaScript 脚本不会访问任何尚未加载完成的资源。否则，可能会导致 JavaScript 脚本出现错误。
• 如果使用了 script defer，那么需要确保 JavaScript 脚本不会与其他 JavaScript 脚本产生冲突。否则，可能会导致 JavaScript 脚本出现错误。

总之，script async 和 script defer 都是用来优化 JavaScript 脚本加载方式的属性，它们可以帮助我们提升网页性能。但是，在使用它们时，我们需要根据 JavaScript 脚本的具体情况来选择合适的属性。