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");
参考链接:https://www.iteye.com/blog/747017186-1977133
参考链接:https://blog.csdn.net/amao_aguai/article/details/86476443