async 是一个 HTML5 <script> 元素的属性，它决定了浏览器是否应该异步加载脚本。当有多个脚本需要加载时，我们应该考虑什么时候使用 async 属性来优化页面性能？
什么是异步加载
在网页上引入脚本文件是很常见的做法，但如果所有脚本都是同步加载的，那么页面就会变得缓慢，因为每次加载脚本都会阻塞渲染过程。
异步加载可以让浏览器并行地下载脚本，而不会阻塞其他资源的加载和页面的渲染。这意味着当浏览器遇到异步脚本时，它将继续加载页面的其余部分，并且在后台下载脚本。一旦脚本下载完成，它将立即执行。
脚本加载顺序
默认情况下，浏览器会按照它们出现在 HTML 中的顺序依次加载所有的脚本。这样保证了脚本的正确性，但也会阻塞页面的加载。此外，如果一个脚本依赖于另一个脚本，那么必须确保先加载依赖项。
为了解决这个问题，HTML5 引入了 async 和 defer 两个属性。defer 属性指示浏览器在页面加载完成后再执行脚本，但仍然要按照它们出现在 HTML 中的顺序依次加载。而 async 属性则可以让浏览器立即下载并执行脚本，而不阻塞页面的渲染过程。
使用 async 属性
使用 async 属性时，我们需要注意以下几点：
- 当前脚本不依赖于其他脚本。
- 当前脚本不会修改 DOM 树结构。
- 当前脚本不需要保证与其他脚本的执行顺序。
对于第一点，如果一个脚本依赖于另一个脚本，则应该将两者合并成一个文件，并使用 defer 属性或放置在 <body> 元素的底部加载。
对于第二点，当浏览器遇到异步脚本时，它会暂停 DOM 的解析和渲染，直到该脚本下载并执行完毕。如果脚本中包含了对 DOM 的操作，并且浏览器已经开始了渲染过程，那么将会导致页面出现延迟和闪烁。因此，我们应该只在脚本不需要操作 DOM 的情况下使用 async 属性。
对于第三点，如果脚本之间有依赖关系，则必须确保它们以正确的顺序加载。否则，可能会导致未定义的行为和错误。
示例代码：
---- --- ----- --- ------- -------------------------- ------- -------------------------- ---- -- ----- --- ------- ---------------- --------------- ------- ---------------- ---------------
结论
在大多数情况下，我们应该优先考虑将脚本放置在 <body> 元素的底部，并使用 defer 属性来异步加载。这样可以保证页面的性能和正确性。
但是，在某些情况下，async 属性也是一个不错的选择。如果我们确定当前脚本不依赖于其他脚本，并
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/31374