Js代码用 script 调用时，放在head与body的区别

最新推荐文章于 2024-05-09 09:43:12 发布

置顶 Yoghurt尧

最新推荐文章于 2024-05-09 09:43:12 发布

阅读量2.3w

点赞数 21

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/Yy921117/article/details/51982159

版权

Javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在系统性的学习一遍html5/css3/javscript过程中，又遇到了之前看到过的一个问题：<script>放在<head>和<body>到底有什么影响和区别。大多数人一定跟我一样，当时百度了一下，基本就得到一个概念性的回答：基本都一样，只是浏览器加载顺序是从上到下，放在head中时，会在页面加载之前加载到浏览器里，放在body中时，会在页面加载完成之后读取。当时也就随意的接受了这样的答案，因为百度出来差不多都是这样的解释。可是这次又遇到了，而且感觉还是挺重要的，因为有时候写网页感觉这个顺序会影响我的插件调用，于是准备记录一下，也希望有人能够从中获取一些自己的领悟。

1.对于一般的js文件或者代码，放在哪里的确是没有影响，放在两个地方都可以。这类js文件是不需要引入什么参数来进行操作的。举个例子（从别人哪里粘过来用的哈）：

<html>
<head> 
    <script type="text/javascript" charset="utf-8" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        alert("aaaaaaaaaaaaaaaaaa");
        window.onload=function(){
            $("#btn").click(function(){
               alert("abcde");
            });
    }
    </script>
</head>
<body>
    <input type="button" id="btn" value="test"/>
    </body>
</html>

<html>
<head> 
    <script type="text/javascript" charset="utf-8" src="js/jquery-1.8.3.js"></script>


</head>
<body>
    <input type="button" id="btn" value="test"/>
    <script type="text/javascript">
        alert("aaaaaaaaaaaaaaaaaa");
        $("#btn").click(function(){
            alert("abcde");
        });
    </script>
</body>
</html>

这两个代码点击按钮test时，都会正确alert出abcde。

2.html加载顺序是从上到下，其实影响的并不是head或body标签，而是执行的顺序，如果先写<body></body>再写<head></head>，就会先执行body的内容，举个例子：（浏览器渲染页面和加载页面机制见链接：http://blog.csdn.net/yy921117/article/details/52290664）

<html> 
<body> 
<script type="text/javascript"> 
alert("body"); 
</script> 
</body> 
<head> 
<script type="text/javascript"> 
alert("head"); 
</script> 
</head> 
</html>

页面加载的时候，会先弹出body，再弹出alert。交换<body></body><head></head>顺序，就会得出相反的顺序。

3.《JavaScript DOM编程艺术（第二版）》时，里面有句话P69：“如果JavaScript文件是从HTML文档的<head>部分用<script>标签调用的，它将在HTML文档之前加载到浏览器里。同样如果<script>标签位于文档底部</body>之前，就不能保证哪个文件最先结束加载（浏览器可能一次加载多个）。因为脚本加载时文档可能不完整，所以模型也不完整。”看了之后感觉还是不得解，于是去百度了一下，得出以下结果：

如果把javascript放在head里的话，则先被解析,但这时候body还没有解析。（常规html结构都是head在前，body在后）如果head的js代码是需要传入一个参数（在body中调用该方法时，才会传入参数），并需调用该参数进行一系列的操作，那么这时候肯定就会报错，因为函数该参数未定义（undefined）。

因此定义一个全局对象，而这个对象与页面中的某个按钮（等等）有关时，我们必须将其放入body中，道理很明显：如果放入head，那当页面加载head部分的时候，那个按钮（等等）都还没有被定义（也可以说是还没有被加载，因为加载的过程就是执行代码的过程，包括了定义），你能得到的只可能是一个undefind。

什么时候应该将其写在body主体里呢？为了实现某些部分动态地创建文档。这里比如制作鼠标跟随事件，肯定只有当页面加载后再进行对鼠标坐标的计算。或者是filter滤镜与javascript的联合使用产生的图片淡入淡出效果等。这个是在页面加载的时候加载。

而为什么我们经常看到有很多的人把js脚本放到head里面都不担心出问题？因为通常把javascript放在head里的话，一般都会绑定一个监听，当全部的html文档解析完之后，再执行代码：

$(document).ready(function(){
//执行代码
})

除此之外，从JavaScript对页面下载性能方向考虑：由于脚本会阻塞其他资源的下载（如图片等）和页面渲染，直到脚本全部下载并执行完成后，页面的渲染才会继续，因此推荐将所有的<script>标签尽可能放到<body>标签的底部，以尽量减少对整个页面下载的影响。例如：

<html>
<head>
   <title>Example</title>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   <p>Change the world by simple products!</p>
   <script type="text/javascript" src="test1.js"></script>
</body>
</html>

</pre><pre name="code" class="javascript">

除此之外，内嵌的脚本也不要紧跟在<link>标签之后，否则会导致页面阻塞去等待样式表的下载。

<a target=_blank href="http://fuaotech.iteye.com/blog/1723135" target="_blank">JS代码放在head和body的区别</a>

<a target=_blank href="http://www.jb51.net/article/29038.htm">JS代码放在head和body中的区别分析</a>

Yoghurt尧

关注

21
点赞
踩
51

收藏

觉得还不错? 一键收藏
4
评论
Js代码用 script 调用时，放在head与body的区别

在系统性的学习一遍html5/css3/javscript过程中，又遇到了之前看到过的一个问题：&lt;script&gt;放在&lt;head&gt;和&lt;body&gt;到底有什么影响和区别。大多数人一定跟我一样，当时百度了一下，基本就得到一个概念性的回答：基本都一样，只是浏览器加载顺序是从上到下，放在head中时，会在页面加载之前加载到浏览器里，放在body中时，会在页面加载完成之后读取...
复制链接

扫一扫

专栏目录