3个文件，一个index.html如下
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js加载顺序</title> 6 </head> 7 <body> 8 显示内容不 9 <script src="a1.js" type="text/javascript"></script> 10 <script src="a2.js" type="text/javascript"></script> 11 </body> 12 </html>
a1.js如下
1 // a1.js 2 /* 3 这里粘贴一本小说，目的让该文件变大，使得下载较慢。 4 */ 5 var a = 111; 6 var b = 222;
a2.js如下
1 // a2.js 2 var c = a+b; 3 alert(c); 4 alert('ddd');
我将a1.js做到20m那么大，在谷歌浏览器下，测试，发现，a1不下载完，a2也就不执行。原来担忧，a1过大，没下载完，而a2已下载完成，a2中要用到a1中的变量怎么办，现在明白了，如果a1没下载完成，那么a2是不会执行的。
同样，将html变成如下
<script src="a1.js" type="text/javascript"></script> <script src="a2.js" type="text/javascript"></script> 这里显示内容
会发现，如果a1.js没有下载完成的话，浏览器里是不会显示
“
这里显示内容
”
的，也在按顺序等待~~和图片不是一回事，图片不会等待上面个先显示再显示下面的。而js会等待后再执行。