script标签一般写在html的什么位置-前端问答-PHP中文网

script标签一般写在html的什么位置

青灯夜游

发布： 2022-09-16 16:20:23

原创

15893人浏览过

script标签的位置：1、放在head标签内部，浏览器解析HTML，解析到script标签时，会先下载完所有script，再往下解析其他的HTML；因此会使网页内容呈现滞后，用户体验差。2、放在body标签内部，浏览器会先解析完整个HTML页面，再下载并解析js。3、放在body闭标签之后，浏览器会忽略之前的“”，所以实际效果和写在body闭合标签之前没有区别。

script标签一般写在html的什么位置

本教程操作环境：windows7系统、HTML5版、Dell G3电脑。

一般script标签会被放在头部或尾部，头部就是head标签里，尾部就是body里，也有放在body闭合标签之后。

1、script标签放在head标签内部

<head>
    <title>获取DOM元素</title>
    <script>
        var myElement = document.getElementById("atag");
        console.log(myElement);
    </script>
</head>
<body>
    <div id="atag">
        <p>一个标签</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2375">
                            <img src="https://img.php.cn/upload/ai_manual/001/246/273/176248568419714.png" alt="UXbot">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2375">UXbot</a>
                            <p>AI产品设计工具</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="UXbot">
                                <span>185</span>
                            </div>
                        </div>
                        <a href="/ai/2375" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="UXbot">
                        </a>
                    </div>
                
    </div>
</body>

登录后复制

打印结果：

立即学习“前端免费学习笔记（深入）”；

在这里插入图片描述
当script标签放在head标签里时，浏览器解析HTML，解析到script标签时，会先下载完所有script，再往下解析其他的HTML。在浏览器下载js时，是不能多个js一起下载的，且浏览器下载js时，会阻塞解析其他的HTML。因此，将script标签放在头部，会使网页内容呈现滞后，用户体验差。

2、script标签放在body标签内部

<body>
    <div id="atag">
        <p>一个标签</p>
    </div>
<script>
    var myElement = document.getElementById("atag");
    console.log(myElement);
</script>
</body>

登录后复制

在这里插入图片描述

将script标签放在body尾部，浏览器会先解析完整个HTML页面，再下载js，这样的话，如果js执行出错了，最起码页面中的元素还可以加载出来，因为DOM文档是从上往下的顺序执行的。但是对于一些高度依赖于js的网页，这样就会显得很慢。

3、script标签放在body闭标签之后

<body>
    <div id="atag">
        <p>一个标签</p>
    </div>
</body>
<script>
    var myElement = document.getElementById("atag");
    console.log(myElement);
</script>

登录后复制

在这里插入图片描述