JavaScript 中 defer 和 async？

defer 和 async 都是用于控制脚本加载和执行时机的 HTML 属性，它们对于优化页面加载和渲染具有重要作用，但在执行顺序和加载方式上有所不同。

defer 属性：

• defer 属性用于告诉浏览器立即下载脚本文件，但延迟执行脚本，直到文档解析完成后（DOMContentLoaded 事件触发之前）才执行。
• 多个带有 defer 属性的脚本按照它们在文档中的顺序依次执行。
• 脚本的下载不会阻止 HTML 解析和渲染过程。
• 适用于不需要立即执行且不影响页面内容展示的脚本。

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

async 属性：

• async 属性用于异步加载脚本，不影响页面的解析和渲染，即下载脚本时不会阻止页面的加载。
• 下载完成后立即执行脚本，但是执行时机可能在文档解析完成之前或之后，取决于脚本加载完成的时间。
• 适用于不依赖其他脚本，并且不需要等待页面解析完成的脚本。

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

区别总结：

• defer 保证脚本的执行顺序与它们在文档中的顺序一致，而 async 则不保证脚本执行的顺序。
• defer 脚本会在文档解析完成后执行，而 async 脚本可能在文档解析完成之前或之后执行。
• 使用 defer 和 async 可以优化页面加载性能，但需要根据具体的脚本需求和页面效果来选择合适的方式。