JS代码可以在HTML文本的head和body中引用

1、按照解析HTML文本的先后顺序来决定JS的执行顺序
2、HTML文本是先解析head标签，解析完成后才会执行body标签中的代码
所以：
1、在head标签中引用的JS先执行（引用多个，按照引用的先后顺序执行）
2、在body标签中引用的JS后执行（引用多个，按照引用的先后顺序执行）
3、页面全部元素加载完成(DOM，javascript，css等)后，触发onload()函数
4、如果页面引入JQuery，在$(document).ready(function(){……})里面的JS脚本是在DOM结构绘制完毕后执行，不必等到加载完成；
注意：它是在onload()函数之前执行的。

如下代码，alert文本中第一个数字为执行顺序
注意：如果发现在前面的JS未执行，就执行后面的了，看下控制台，很可能是前面的JS有错误

<!DOCTYPE html>
<html lang="en">
<head>
    <title>有JQuery的JS执行顺序</title>
    <script type="text/javascript" src="js/jquery-1.10.2.js"  charset="UTF-8"></script>
	<script type="text/javascript" src="js/head.js"  charset="UTF-8"></script>
    <script type="text/javascript">
        alert("2--head-最先执行1");
    </script>
    
    <script type="text/javascript">
		alert("3--head-最先执行2");
        $(document).ready(function(){
            alert("7--head-JQuery-到底谁先执行1");
        });
    </script>
</head>
<body onload="alert('9--body中onload-最后执行');">
	<script type="text/javascript">
		alert("4--body-中间执行");
        $(document).ready(function(){
            alert("8--body-JQuery-到底谁先执行2");
        });
    </script>
    <script type="text/javascript">
        alert("5--body-中间执行1");
    </script>
    测试JS的执行顺序
    <script type="text/javascript">
        alert("6--body-中间执行2");
    </script>
</body>
</html>

head.js中代码如下：

alert("1--被head引入的js");