JavaScript 加载顺序和异步加载详解

首先，看下面代码，当执行html文件时候，首先会加载哪一个JS？

<script type="text/javascript" src="demo1.js" async></script>
<script type="text/javascript" src="demo2.js"></script>

根据JavaScript的API说明，async属性是，立即下载script，一旦脚本可用，则会异步执行。理论上的结果是当运行到demo1.js的时候，立即下载和异步先执行demo1.js。

但是，测试结果显示，是先执行demo2.js。为什么呢？（结果就不粘贴出来了，自己去测试一下，绝对是这个效果。）

原来，这个异步加载的方式并不是我们想象中的那样子，先看下面的<script> 标签引入脚本的三种情况：

立即执行

<script src="demo1.js">
<script src="demo2.js">

顺序：保证先后顺序。解析：HTML 解析器遇到它们时，将阻塞（取停止解析），待脚本下载完成并执行后，继续解析标签之后的文档。

推迟执行

<script defer src="demo1.js">
<script defer src="demo2.js">

顺序：保证先后顺序。解析：HTML 解析器遇到它们时，不阻塞（脚本将被异步下载），待文档解析完成之后，执行脚本。

尽快执行

<script async src="demo1.js">
<script async src="demo2.js">

顺序：不保证先后顺序。解析：HTML 解析器遇到它们时，不阻塞（脚本将被异步下载，一旦下载完成，立即执行它），并继续解析之后的文档。

这个加载循序就个非阻塞的概念有关联了，总结来说就是，当<script>标签存在async/defer的时候，这个script将调用非阻塞异步加载方式，所谓的非阻塞异步加载方式，用第一个例子来说明，当执行到<script src="demo1.js" async></script> 这一行代码的时候，把demo1.js挂起，异步加载demo1.js，继续运行下面的代码，就是运行<script src="demo2.js"></script>，而异步加载完demo1.js后，立即执行（defer和async 的区别就是，async异步加载完立即执行，defer异步加载完延迟执行）