任何有 Web 开发经验的人都知道交互式网站的基础是 JavaScript。 我们通过在 HTML 文件中放置脚本标签来访问我们的外部 JavaScript 文件，浏览器会在解析 HTML 时加载和执行这些文件。
有些人可能不知道，有几种方法可以控制浏览器加载和执行这些脚本的方式和具体时间。 在没有指定我们希望它如何加载的情况下，现代浏览器将开始将 HTML 解析为 DOM，直到它到达脚本标记。 然后它会在继续解析 HTML 之前加载并执行该脚本。
为什么这很重要？ 因为这会对用户体验和他们在页面加载时看到的内容以及我们网站的加载时间产生重大影响。 加载时间可以说是大多数开发人员跟踪的最重要的指标之一，因为如果网站加载速度太慢，会导致用户离开。
那么我们可以做些什么来帮助改善加载时间呢？ 幸运的是，脚本标签有两个重要的属性，我们可以使用它们来帮助控制浏览器到达脚本标签时发生的事情，async 和 defer。 在这篇文章中，将展示加载类型之间的差异以及应该何时考虑使用它们。
不使用 async 或 defer 的标准加载方法会暂停 HTML 解析以加载脚本文件，然后在继续解析剩余的 HTML 之前执行脚本。 很直接。 我认为这就像一个交通灯。 浏览器必须停止并等待指示灯变绿或脚本完全下载并执行，然后浏览器才能继续前进。
当我们开始深入研究可用于脚本标签的 async 和 defer 属性时，事情开始变得有趣。
例如，当浏览器看到其中包含 async 的脚本标记时，它会并行下载脚本文件，同时继续解析 HTML。 直到脚本文件完全下载后，它才会暂停解析 HTML 并执行脚本文件。 您可以将异步视为停止标志。 浏览器只需要暂停足够长的时间让脚本执行，然后它就可以继续前进。
另一方面， defer 标签也会并行下载脚本文件，但会等到 HTML 文件完全加载后再执行脚本。 就好像它看到一个十字路口，然后直接通过而没有停下来。
如下图所示：
知道了这三种方法的工作原理以及它们之间的区别，那么应该什么时候使用它们？
其中一些取决于你放置脚本标签的位置。 在 async 和 defer 之前，很多开发人员将它们放在 body 部分的末尾。 这允许在浏览器开始下载和解析脚本文件之前解析所有 HTML。
如果你的脚本顺序正确，就应该可以使用没有任何属性的简单脚本标记。
在正文中包含脚本标签，感觉很奇怪不是吗，因为它们实际上并不是正文部分应具有的页面格式的一部分。 相反，我更喜欢将所有脚本都保留在 head 部分。
如果我们在 head 部分使用没有 async 或 defer 的简单脚本标记，那可能会严重延迟我们的 HTML 甚至开始解析。 这就引出了一个问题，异步还是延迟？
答案是视情况而定。 如果脚本依赖于存在的某些 DOM 元素，就应该使用 defer。 这将允许在脚本执行之前完全解析 HTML。 考虑向某些 DOM 元素添加事件处理程序。 如果尚未添加这些元素，则在它们出现之前执行该脚本是没有意义的。
defer 所做的另一件事是遵循脚本被调用的顺序。 因此，如果一个脚本依赖于另一个脚本，那么 defer 也是可行的方法。
如果脚本不符合这两个条件，最好为脚本使用 async 属性。 这会减慢整个解析过程，这就是我通常使用 defer 的原因。
限时特惠：本站每日持续更新海量各大内部网赚创业教程，会员可以下载全站资源点击查看详情
站长微信：11082411
