异步加载脚本

问题引出

传统的<script>标签有两个特点：

• 会阻塞DOM解析，因此大多数应用都选择将标签放置在DOM的末尾，为了兼容老的浏览器，这是防止阻塞DOM的最好做法；
• 脚本会按照顺序加载并执行

由以上两个特点可以得出传统<script>一个明显的缺点：

脚本会排队加载并运行，如果脚本数量过多，则会导致应用迟迟无法加载完成。

解决方案

<script>标签的defer与async属性都可以让脚本异步加载，需要注意的是：

脚本只是异步加载，并不一定会异步执行。

换言之，异步加载只是提前尽可能多地将数据准备好，以便需要使用时可以快速获取。也就是说：

不管是defer还是async，都不会导致DOM解析阻塞。

defer与async的区别：

• defer脚本会在DOM解析完成后，并在DOMContentLoaded事件发生前执行，并且他们是有顺序关系的；
• async脚本会异步加载并异步执行，各个脚本间没有顺序关系，谁先加载完先执行。