html文档加载顺序简单理解

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="outUp1.js"></script>
    <script>
        alert("body上面的js!");
        document.getElementsByTagName("div")[0].style.cssText = "background-color:red";
    </script>
    <script src="outUp2.js"></script>
    <!--html文档按照从上往下的顺序加载,他没有找到div这个标签名,所以样式没有被修改
    想要让上面引入的js文件在文档加载完成之后执行的话就需要用window.onload函数,
    这样才不会出错。-->
</head>
<body>
<div color="green">初始测试div</div>
</body>
<script src="outUp3.js"></script>
<script>
    alert("body下面的js!");
</script>
<script src="outUp4.js"></script>
</html>

outUp1.js

alert("body上面的外部资源js1!");
document.getElementsByTagName("div")[0].style.cssText = "background-color:aqua;";

outUp2.js

alert("body上面的外部资源js2!");
document.getElementsByTagName("div")[0].style.cssText = "color:black;";

outDown1.js

alert("body下面的外部资源js3!");
document.getElementsByTagName("div")[0].style.cssText = "background-color:blue;";

outDown2.js

alert("body下面的外部资源js4!");
document.getElementsByTagName("div")[0].style.cssText = "color:red;";
原文地址:https://www.cnblogs.com/foreverlin/p/10093883.html