页面中多个js是如何加载运行的以及defer和async的区别
1.页面中多个js是如何加载运行的
页面中的js是会并行加载的，从上到下，只要js加载完成后，立马执行。但是如果某个js如果已经下载完成，但是其前一个js还没有下载执行，那么它必须等到前一个js下载执行完之后其才能执行。
比如页面有 a.js,b.js,c.js三个js，他们在html页面中的顺序如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript" src="a.js"></script> <script type="text/javascript" src="b.js"></script> <script type="text/javascript" src="c.js"></script> </body> </html>
a.js,b.js,c.js是并行加载的，基本上能同时下载到本地，但是如果a.js还没有加载执行完成，b.js已经下载完毕，那么b.js此刻依旧是不能执行的，必须等到a.js执行完成后其才能执行。
我们新建一个html页面（test.html）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js执行顺序测试</title> </head> <body> <script src="./js/a.js"></script> <script src="./js/b.js"></script> <script src="./js/c.js"></script> </body> </html>
新建a.js，其是个比较大的 js 文件（我们假设其为一个jquery.js）
/*
jquery文件
*/
console.log('a.js');
新建b.js
console.log('b.js');
新建c.js
console.log('c.js')
我们将chrome的network设为一个比较慢的速度，能更方便看出瀑布流图
network的瀑布流图是下面的
控制台的打印结果是下面的
由此可见，虽然，b.js和c.js先a.js下载完成，但其仍然是等到a.js下载执行完之后其才执行的。
2.async和defer的区别
默认页面中引用js是会阻塞后面的元素加载执行的，所以就可以给引用的script标签加上async或defer。
2.1 当页面中只有一个 async 和 defer 时，他俩的功能是一样的，唯一的区别是defer必须要等到 DOMContentLoaded 事件
触发后才执行，而async只要js下载完之后立马执行。
2.2当页面有多个async和defer时，async同样还是下载完立马执行，而defer必须从上到下按序执行，就算是排在后面的js比前
面的js先下载好也不能执行，必须等到前面的js下载执行完毕，后面的才能按序执行
如下图可见，b.js和c.js先a.js下载完成
但是其必须等到a.js下载完成之后，其才能执行
多个async就不一样，谁先下载好，谁执行
如图可见，b先下载好，b先执行，a最后下载好，所以a最后执行
总结：
页面中多个js执行顺序，从上到下依次下载执行
当有async标签时，可不阻塞后面页面加载执行，当js下载完成后立马执行，当有多个时也是一样
当有defer标签时，其必须在DOMContentLoaded事件之后执行，当页面有多个defer文件时，其必须从上到下按顺序执行，哪怕后面的带defer的js先下载，也要等到前面的带defer的js先执行完才能执行。
