script标签写在不同位置显示的结果不一样

大白1004

于 2023-11-30 23:06:49 发布

阅读量199

点赞数

分类专栏：学习#前端vue 文章标签： vue java

本文链接：https://blog.csdn.net/qq_63943929/article/details/134657216

版权

学习#前端vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章探讨了在HTML文档中，JavaScript代码放在或标签内的影响，强调了head中加载可能导致的问题，并提供了将JS放在body底部、使用DOMContentLoaded事件和异步/延迟加载等解决策略。

摘要由CSDN通过智能技术生成

前言

首先我们来了解一下html的大致文档

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
 
<body>
文档内容......
</body>
 
</html>

head元素———头部标签元素

插入css样式，js样式，还有meta 信息
添加元素标签：<title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

body标签—— 页面显示内容

用户可以看见的内容，可以包含文本、图片、音频、视频等各种内容。

body标签（里面放的就是页面上展示出来的内容）
body 元素是定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）body是用在网页中的一种HTML标签，表示网页的主体部分，也就是用户可以看到的内容，可以包含文本、图片、音频、视频等各种内容！

不同位置不同效果

让我们来看一下

放在body标签内

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入的使开发版本 -- 包含完整的注释和警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <a href="#">{{count}} </a>
    </div>

    <script>
        // 一但引入vueJs的核心包,在全局环境,就有了vue构造函数
        const app = new Vue({
            //通过了el配置选择器,指定vue管理的使那个盒子
                el:'#app',
            //通过data 提供数据
            data:{
                msg:'加油 你是最酷的',
                count:666
            }
        })
    </script>

</body>
</html>

---------------------------------------------------------浏览器展示效果-------------------------------------------------

放在head标签内

在HTML文件中，将JavaScript代码放在head标签内会导致浏览器在解析HTML时会先执行JavaScript代码，而此时页面的其他内容还未加载完毕。

所以页面先加载js代码，但是并没有获取到body内的元素，所以无法获取到数据。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入的使开发版本 -- 包含完整的注释和警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    
    <script>
        // 一但引入vueJs的核心包,在全局环境,就有了vue构造函数
        const app = new Vue({
            //通过了el配置选择器,指定vue管理的使那个盒子
                el:'#app',
            //通过data 提供数据
            data:{
                msg:'加油 你是最酷的',
                count:666
            }
        })
    </script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <a href="#">{{count}} </a>
    </div>


</body>
</html>

---------------------------------------------------------浏览器展示效果-------------------------------------------------

放在body标签后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <a href="#">{{count}} </a>
    </div>


</body>
    <!-- 引入的使开发版本 -- 包含完整的注释和警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    
    <script>
        // 一但引入vueJs的核心包,在全局环境,就有了vue构造函数
        const app = new Vue({
            //通过了el配置选择器,指定vue管理的使那个盒子
                el:'#app',
            //通过data 提供数据
            data:{
                msg:'加油 你是最酷的',
                count:666
            }
        })
    </script>
</html>

---------------------------------------------------------浏览器展示效果-------------------------------------------------