在系统性的学习一遍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>