JS在 HTML中的执行顺序

最新推荐文章于 2021-03-02 15:03:10 发布

csdnY_88

最新推荐文章于 2021-03-02 15:03:10 发布

阅读量1.2k

点赞数

分类专栏： JS 文章标签： javascript html

本文链接：https://blog.csdn.net/CSDNY_88/article/details/111934959

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>