JavaScript代码的执行时机与HTML内容加载时机问题

ok!ko

于 2023-06-14 12:48:16 发布

阅读量172

点赞数

文章标签： java javascript 前端

本文链接：https://blog.csdn.net/qq_45929019/article/details/131205350

版权

（需求：使用time.js实现HTML页面中时间的实时更新）

1.错误代码示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>test</title>
    <script type="text/javascript" src="time.js"></script>
</head>

<body>
<!--头部-->
    <header>
        <h1>test</h1>
    </header>
<!--时间-->
    <section class="publicTime">
        <span id="time">2015年1月1日 11:11  星期一</span>
        <a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
    </section>  

</body>
</html>

原因分析：

（1）当浏览器加载一个网页时，它会按照一定的顺序解析和执行其中的 JavaScript 和 HTML 代码；

（2）当浏览器加载到<script>标签时，src 属性指向外部 JavaScript 文件time.js，浏览器会下载并执行该文件;

（3）当执行到：time.js文件中的var div = document.getElementById("time");时，页面中的<span id="time">2015年1月1日 11:11 星期一</span>标签还没加载，此时div=null;

（4）页面显示如下：

报错：Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')

浏览器加载过程中 JavaScript 和 HTML 代码的执行是并行进行的。这意味着 JavaScript 代码的执行不会阻塞 HTML 结构的解析和渲染，也不会阻塞外部资源的下载。然而，如果 JavaScript 代码需要操作和修改 HTML 或执行其他依赖于 HTML 结构的操作，最好将 JavaScript 代码放在合适的位置，以确保它们在相关 HTML 元素可用时执行。

外部JavaScript文件time.js如下：

function fn(){
    var time = new Date();
    var str= "";
    var div = document.getElementById("time");
    // console.log(div)
    var year = time.getFullYear();
    var mon = time.getMonth()+1;
    var day = time.getDate();
    var h = time.getHours();
    var m = time.getMinutes();
    var s = time.getSeconds();
    var week = time.getDay();
    switch (week){
        case 0:week="日";
            break;
        case 1:week="一";
            break;
        case 2:week="二";
            break;
        case 3:week="三";
            break;
        case 4:week="四";
            break;
        case 5:week="五";
            break;
        case 6:week="六";
            break;
    }
    str = year +"年"+totwo(mon)+"月"+totwo(day)+"日"+"&nbsp;"+totwo(h)+":"+totwo(m)+":"+totwo(s)+"&nbsp;"+"星期"+week;
    // console.log(str);
    div.innerHTML=str;
}
fn();
setInterval(fn,1000);
function totwo(n){
    if(n<=9){
        return n = "0"+n;
    }
    else{
        return n =""+n;
    }
}

2.正确代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>test</title>
</head>

<body>
<!--头部-->
    <header>
        <h1>test</h1>
    </header>
<!--时间-->
    <section class="publicTime">
        <span id="time">2015年1月1日 11:11  星期一</span>
        <a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
    </section>  
</body>
<!--将其放到后面，等HTML页面加载完成，才执行-->
    <script type="text/javascript" src="time.js"></script>
</html>

将<script>标签放在</body>标签之后，确保了JavaScript代码在HTML内容加载完成后执行。这样document.getElementById("time")就能成功找到id为"time"的<span>元素，并进行内容更新。

3.当然，具体<script>放的位置，需要看你具体的需求，如果你需要在页面加载之前进行一些操作或设置一些全局变量，那么就可以把<script>放到<head>标签中可以确保脚本在页面加载期间首先被加载和执行。