脚本加载模式：默认加载、defer、async详解

前言

在网页开发中，<script> 标签是用来加载和执行 JavaScript 代码的。我们可以通过<script> 标签来引入外部脚本文件，也可以直接在标签中编写脚本代码。

<script> 标签有三种不同的加载模式：默认加载、defer 和 async。这三种加载模式对脚本的加载和执行方式有不同的影响。在本文中，我们将详细介绍这三种加载模式的特性和区别，并探讨在不同场景下如何选择合适的加载模式。

默认加载

默认加载是<script> 标签最常用的加载模式。在这种模式下，浏览器会在解析到<script> 标签时立即加载并执行脚本代码。如果脚本代码中有依赖关系，那么浏览器会等待脚本代码加载并执行完成之后再继续加载和执行后面的内容。

默认加载的优点是简单易用，不需要任何特殊的设置。但是，默认加载也有一个缺点：它会阻塞 HTML 的 DOM 构建。这意味着浏览器在加载和执行脚本代码之前，不会继续解析和构建 HTML DOM。

defer

defer 加载模式是 HTML5 中引入的一种新的加载模式。在defer 模式下，浏览器会在解析到<script> 标签时立即加载脚本代码，但是不会立即执行脚本代码。而是等到 HTML DOM 构建完成之后再执行脚本代码。

defer 加载模式的优点是不会阻塞 HTML 的 DOM 构建，从而可以提高页面的加载速度。但是，defer 加载模式也有一个缺点：它可能会导致脚本代码的执行顺序与预期不一致。

async

async 加载模式也是 HTML5 中引入的一种新的加载模式。在async 模式下，浏览器会在解析到<script> 标签时立即加载脚本代码，并且立即执行脚本代码。但是，async 脚本代码的执行不会阻塞 HTML 的 DOM 构建和后面的脚本代码的加载和执行。

async 加载模式的优点是不会阻塞 HTML 的 DOM 构建，并且可以保证脚本代码的执行顺序与预期一致。但是，async 加载模式也有一个缺点：它可能会导致脚本代码的执行顺序与预期不一致。

如何选择合适的加载模式

在选择<script> 标签的加载模式时，需要考虑以下几个因素：

• 脚本代码的依赖关系：如果脚本代码之间存在依赖关系，那么应该使用默认加载模式。
• 脚本代码对页面加载速度的影响：如果脚本代码对页面加载速度有较大的影响，那么应该使用defer 或 async 加载模式。
• 脚本代码的执行顺序：如果脚本代码的执行顺序很重要，那么应该使用async 加载模式。

总结

<script> 标签有三种不同的加载模式：默认加载、defer 和 async。这三种加载模式对脚本的加载和执行方式有不同的影响。在选择<script> 标签的加载模式时，需要考虑脚本代码的依赖关系、脚本代码对页面加载速度的影响和脚本代码的执行顺序。