当用户开始访问,首先下载html资源和外部js资源,在chrome中显示的是html先下载,然后下载外部js,外部js的下载顺序安引用顺序,但是下载到达情况则视情况而定,接着才是图片和其他资源,但是要注意的是,js下载完成之后就开始执行了,也包括<script>块中的语句,此时页面可能还未开始渲染,所以会有白屏,就是js先执行了的原因,还有一点,外部js和<script>里的语句先执行的是外部js,这一点也可以从我们引用各种库的例子得到佐证。可以写一些简单的测试例子:
1 <html> 2 <head> 3 <script type="text/javascript" src="http://localhost/everywhere.js"></script> 4 <script type="text/javascript" src="http://localhost/test.js"></script> 5 <script type="text/javascript"> 6 //ready(alert(document.getElementById("hehe"))); 7 //ready(); 8 alert("inner") 9 alert(document.getElementById("hehe")); 10 </script> 11 </head> 12 <body> 13 <p id="hehe">test</p> 14 </body> 15 16 </html>
js1:
1 alert("out"); 2 alert(document.getElementById("hehe")); 3
js2:
1 alert("out2");
通过测试可以很容易的理解其执行顺序。