html中script的位置导致的js不能正常执行问题

前言

今天写网页，犯了一个刚学h5时容易犯的低级错误，记录一下。

情景

问题代码：
不用看代码的内容，看html" title=js>js的引入位置即可。这两个文件在同一目录下html" title=js>js文件名为1.html" title=js>js。
html代码：

html"><!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--html" title=js>js文件在此引入-->
    <script src="1.html" title=js>js"></script>
    <title>五角星</title>
</head>
<body>
    <canvas id="mycanvas" width="300" height="200" style="border: 1px solid;">
        您的浏览器不支持H5画布！
    </canvas>
</body>
</html>

html" title=js>js代码：

html" title=javascript>javascript">var mycanvas = document.getElementById("mycanvas");
var ctx = mycanvas.getContext("2d");
var pas = Math.PI*2/5;
var i=0;
ctx.beginPath();
ctx.moveTo(150, 10);//绘制的起点

var id = setInterval(function(){//圆心位置(150,110)
    i += 2;
    if(i > 10){
        clearInterval(id);
    }
    ctx.lineTo(150 + 100 * Math.cos(i*pas-Math.PI/2), 110 + 100 * Math.sin(i*pas-Math.PI/2));
    ctx.strokeStyle = "red";
    ctx.stroke();
},200)

这段代码的html" title=js>js可以执行吗？答案是不能。运行结果及报错截图如下。
在这里插入图片描述
那么改变一下html" title=js>js的位置呢。
html代码：

html" title=javascript>javascript"><!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>五角星</title>
</head>
<body>
    <canvas id="mycanvas" width="300" height="200" style="border: 1px solid;">
        您的浏览器不支持H5画布！
    </canvas>
    <!--html" title=js>js文件在此引入-->
    <script src="1.html" title=js>js"></script>
</body>
</html>

运行结果截图
在这里插入图片描述
丝滑运行。

原因分析

为什么会出现这种状况呢？
我们知道html文件是从上到下执行的。如果在head中引入html" title=js>js文件，那么html" title=js>js的执行会提前于body标签内容执行，导致html" title=js>js不能找到要操作获取的标签id。最终导致html" title=js>js文件执行出错。
而将html" title=js>js在body底部或外面引入则可以运行，理论上讲只要你引入html" title=js>js文件的位置在你要获取id的标签后面执行就没有问题。

问题解决

可以向上面那样将html" title=js>js的引入放到后面。但一些有强迫症的朋友可能就想将它放在head里，当然这也不是不可以实现的。
第一种方法： 需要在你的html" title=js>js文件中使用window.onload = function(){}来等待html加载完成再解析html" title=js>js了。示例如下。
html" title=js>js代码：

html" title=javascript>javascript">window.onload = function(){//html加载完成后执行
    var mycanvas = document.getElementById("mycanvas");
    var ctx = mycanvas.getContext("2d");
    var pas = Math.PI*2/5;
    var i=0;
    ctx.beginPath();
    ctx.moveTo(150, 10);//绘制的起点

    var id = setInterval(function(){//圆心位置(150,110)
        i += 2;
        if(i > 10){
            clearInterval(id);
        }
        ctx.lineTo(150 + 100 * Math.cos(i*pas-Math.PI/2), 110 + 100 * Math.sin(i*pas-Math.PI/2));
        ctx.strokeStyle = "red";
        ctx.stroke();
    },200)
}

第二种方法： 使用script标签的defer属性，此属性会延迟html" title=js>js代码的执行。只有当html文件加载完成后才会执行html" title=js>js。（注意只有html" title=js>js为外部引入时才有效）

html" title=js>js"><!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--html" title=js>js文件在此引入-->
    <script src="1.html" title=js>js" defer></script>
    <title>五角星</title>
</head>
<body>
    <canvas id="mycanvas" width="300" height="200" style="border: 1px solid;">
        您的浏览器不支持H5画布！
    </canvas>
</body>
</html>

第三种方法： 使用script标签的async属性，此属性会异步加载html" title=js>js代码，不会因为执行html" title=js>js而使HTML渲染进入阻塞。（注意只有html" title=js>js为外部引入时才有效）

html" title=js>js"><!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--html" title=js>js文件在此引入-->
    <script src="1.html" title=js>js" async></script>
    <title>五角星</title>
</head>
<body>
    <canvas id="mycanvas" width="300" height="200" style="border: 1px solid;">
        您的浏览器不支持H5画布！
    </canvas>
</body>
</html>