async和defer在脚本加载中的区别是什么？

在加载JavaScript文件时，有几种不同的选项可供选择。了解脚本的加载和执行方式对于网站性能以及用户体验的整体质量至关重要。让我们来看看<script>标签的工作原理以及某些属性如何影响其行为。

脚本加载可视化

没有属性

很多时候，大多数人倾向于使用没有属性的普通<script>标签。这实现了默认的浏览器行为。HTML将被解析，直到遇到脚本标签为止。此时，HTML解析将暂停，并加载脚本。然后，在HTML解析可以继续之前，脚本将被执行。

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

正如您所见，这种方法可能会导致HTML解析的长时间暂停，从而降低用户体验。

为了避免HTML解析的长时间暂停，可以使用async属性。这样可以确保在遇到脚本时，解析不会立即暂停。相反，脚本在后台加载，只有HTML解析在执行脚本之前暂停。脚本执行完成后，HTML解析会像往常一样恢复。

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

虽然async属性采取了措施来减轻之前提到的问题，但它带来了一个重要的注意事项。以这种方式加载的脚本不能保证按照指定的顺序执行，而是在加载时按照它们变得可用的顺序执行。

最后，defer属性在之前的行为基础上保证了脚本的执行顺序。与之前一样，脚本在遇到时会在后台加载。当HTML解析完成后，它们按顺序执行。

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