HTML5的Async和Defer属性有什么区别？

async和defer的核心区别在于脚本执行时机和顺序。async脚本下载完成后立即执行，不保证顺序，适用于独立且无需操作dom的脚本；defer脚本在html解析完成后按序执行，适用于依赖dom或需顺序执行的脚本。两者均不阻塞html解析，但async可能打断渲染，defer则更利于页面首次渲染性能。

HTML5中，async 和 defer 属性的核心区别在于它们如何影响脚本的下载和执行时机，以及它们是否阻塞HTML解析和渲染。简单来说，async 脚本下载完成后立即执行，不保证顺序，也不阻塞HTML解析；而 defer 脚本也是异步下载，但会等到整个HTML文档解析完成后、DOMContentLoaded 事件触发前，按照它们在文档中出现的顺序依次执行，同样不阻塞HTML解析。

在深入一点看，当浏览器解析HTML文档遇到一个 <script> 标签时，如果没有 async 或 defer 属性，它会暂停HTML的解析，下载并立即执行该脚本，这通常会导致页面渲染被阻塞。这就像你在读一本书，突然发现书里夹了个小纸条让你先完成一个任务，你得停下来做完任务才能继续读书。</script>

加上 async 属性后，脚本的下载会和HTML解析并行进行，下载完成后，脚本会立即执行。这个执行过程可能会在HTML解析完成之前，也可能在之后，取决于脚本下载的速度。最关键的是，它的执行是独立的，不保证与其他 async 脚本或常规脚本的执行顺序。这就像你边读书边听音乐，音乐什么时候放完就什么时候听，你不会为了等音乐暂停读书，但音乐播到哪段你也不太能控制。

立即学习“前端免费学习笔记（深入）”；

而 defer 属性也让脚本的下载与HTML解析并行进行，但它的执行时机被推迟了。浏览器会等到整个HTML文档解析完毕后，但在触发 DOMContentLoaded 事件之前，按照脚本在文档中出现的顺序依次执行所有 defer 脚本。这意味着 defer 脚本总是在DOM准备好之后才运行，并且它们的相对顺序是可靠的。这更像是你在读书的时候，让一个朋友帮你下载资料，等书读完了，朋友也把资料都下载好了，你再按照顺序把这些资料整理一遍。

何时应该使用Async属性？

在我看来，async 属性最适合那些独立性强、不依赖于DOM结构完全加载、也不依赖于其他脚本执行顺序的脚本。比如，你网站上的Google Analytics统计代码、一些第三方广告脚本，或者像Twitter、Facebook的分享按钮脚本。

这些脚本的特点是：

• 不阻塞关键渲染路径： 它们不会因为下载和执行而拖慢用户看到页面内容的时间。
• 执行顺序不重要： 你不关心分析脚本是先于广告脚本执行，还是反之，只要它们最终都执行了就行。
• 不依赖DOM： 它们通常只是收集信息或者在页面上插入一些独立的元素，不需要完整的DOM树。

举个例子，如果你有一个分析脚本：

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

浏览器会异步下载 analytics.js，并且在下载完成后立即执行它，而不会等待页面的其他部分加载。这对于提升用户体验至关重要，因为用户可以更快地看到页面内容，而后台的统计功能也在悄悄进行。

何时优先选择Defer属性？

defer 属性则更适用于那些需要操作DOM，或者依赖于其他脚本（比如某个JavaScript库）的脚本。在我日常开发中，大部分前端交互逻辑、表单验证、或者依赖jQuery等库的自定义脚本，我都会优先考虑使用 defer。

选择 defer 的原因通常是：

• 依赖DOM结构： 脚本需要确保HTML元素已经解析并可用，才能正确地查找和操作它们。
• 执行顺序很重要： 如果你的 main.js 脚本使用了 library.js 中定义的功能，那么 library.js 必须在 main.js 之前执行。defer 能够保证这种顺序。
• 不阻塞渲染，但保证DOM就绪： 它提供了异步加载的好处，同时又确保了脚本在DOM可用时才执行，避免了常见的“元素未找到”错误。

比如，你有一个jQuery库和你的自定义脚本：

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

浏览器会并行下载 jquery.js 和 main.js，但会等到HTML解析完毕后，先执行 jquery.js，再执行 main.js。这样，当 main.js 运行时，它所依赖的jQuery库就已经准备好了。

Async和Defer对页面加载性能有何影响？

从性能优化的角度看，async 和 defer 都比默认的同步加载方式要好得多，因为它们都避免了脚本下载和执行对HTML解析的阻塞。这直接意味着用户可以更快地看到页面的骨架内容，减少了白屏时间。

具体来说：

• async 的影响： 由于 async 脚本下载完成后就立即执行，如果脚本文件较大或者执行逻辑复杂，它可能会在HTML解析过程中突然插入执行，这可能会短暂地占用主线程，影响到页面的渲染进程。虽然它不阻塞HTML解析，但可能会在某个不确定的时间点“打断”渲染。对于一些非核心功能，这通常是可以接受的。
• defer 的影响： defer 脚本的执行被推迟到HTML解析完成之后，这保证了DOM树在脚本执行前是完整的。这意味着浏览器可以更早地完成HTML解析和DOM构建，从而更快地进行首次渲染。所有的 defer 脚本会在一个相对集中的时间点（DOMContentLoaded 之前）执行，这使得它们的行为更可预测，对用户感知的页面加载速度通常更为友好。

总的来说，两者都提升了性能，但侧重点不同。async 更注重脚本的“尽快执行”，而 defer 则更注重“在DOM就绪后按序执行”，同时确保不阻塞初始渲染。选择哪个，很大程度上取决于你的脚本具体用途和对执行时机的要求。在实际项目中，我常常会根据脚本的特性灵活搭配使用这两种属性。

以上就是HTML5的Async和Defer属性有什么区别？的详细内容，更多请关注php中文网其它相关文章！