现在 script 标签新增了 2 个属性：defer 和 async，就是为了解决此类问题，提升页面性能的。
# ————————————————
<script的后面可以跟属性 defer 或
首先
head头部里的
<script src="info.js"  type="text/javascript"></script> 不要加这个

可以在body里面外部引用模块的js脚本加载方式，加上上面的属性

比如
原本这个样子 --》 <script src="test001.js"  type="text/javascript"></script>

改成这个样子 —》 <script defer src="test001.js"  type="text/javascript"></script>

# ——————原因↓————————————

浏览器的解析规则是：如果遇到 script 标签，则暂停构建 DOM，转而开始执行 script 标签，如果是外部 script，那么浏览器还需要一直等待其「下载」并「执行」后，再继续解析后面的 HTML。


如果请求并执行「vue.global.js」需要 3 秒，「vue-router.global.js」需要 2 秒，那么页面中的 Hello ~，则至少需要 5 秒以上才会展示出来。

# ——————建议↓————————
建议所有的外联脚本都默认设置此属性，因为他不会阻塞 HTML 解析，可以并行下载 JavaScript 资源，还可以按照他们在 HTML 中的相对顺序执行，确保有依赖关系的脚本运行时，不会缺少依赖。

在 SPA 的应用中，可以考虑把所有的 script 标签加上 defer 属性，并且放到 body 的最后面。在现代浏览器中，可以并行下载提升速度，也可以确保在老浏览器中，不阻塞浏览器解析 HTML，起到降级的作用。

#—————注意↓———————
defer 属性仅适用于外部脚本，如果 script 脚本没有 src，则会忽略 defer 特性。
defer 属性对模块脚本（script type='module'）无效，因为模块脚本就是以 defer 的形式加载的。




# ——————————————————————————
# ——————————还有1个属性，async——————————
# ——————————————————————————


浏览器在解析到带有 async 属性的 script 标签时，也不会阻塞页面，同样是在后台默默下载此脚本。当他下载完后，浏览器会暂停解析 HTML，立马执行此脚本。

看起来还是蛮好理解的吧？咱们再来讨论 2 个小细节：

Q1：如果设置了 async 属性的 script 下载完之后，浏览器还没解析完 HTML，会怎样？

A1：浏览器会暂停解析 HTML，立马执行此脚本，等执行完之后，再继续解析 HTML。

Q2：如果有多个 async 属性的 script 标签，那等他们下载完成之后，会按照代码顺序执行吗？

A2：不会。执行顺序是：谁先下载完成，谁先执行。async 的特点是「完全独立」，不依赖其他内容。





最佳实践：

当我们的项目，需要集成其他独立的第三方库时，可以使用此属性，他们不依赖我们，我们也不依赖于他们。 通过设置此属性，让浏览器异步下载并执行他，是个不错的优化方案。

注意：

async 特性仅适用于外部脚本，如果 script 脚本没有 src，则会忽略 async 特性。



# ——————————————————————————
# ———————————区别↓———————————————

总结


defer
不阻塞浏览器解析 HTML，等解析完 HTML 之后，才会执行 script。
会并行下载 JavaScript 资源。
会按照 HTML 中的相对顺序执行脚本。
会在脚本下载并执行完成之后，才会触发 DOMContentLoaded 事件。
在脚本执行过程中，一定可以获取到 HTML 中已有的元素。
defer 属性对模块脚本无效。
适用于：所有外部脚本（通过 src 引用的 script）。


async
不阻塞浏览器解析 HTML，但是 script 下载完成后，会立即中断浏览器解析 HTML，并执行此 script。
会并行下载 JavaScript 资源。
互相独立，谁先下载完，谁先执行，没有固定的先后顺序，不可控。
由于没有确定的执行时机，所以在脚本里面可能会获取不到 HTML 中已有的元素。
DOMContentLoaded 事件和 script 脚本无相关性，无法确定他们的先后顺序。
适用于：独立的第三方脚本。
【重点来了，怎么理解“独立的第三方脚本”？我举几个例子就明白了，比如：广告的js脚本、网站访问流量统计的js脚本。】



另外：async 和 defer 之间最大的区别在于它们的执行时机。