JavaScript-关于JavaScript放在head和body里的不同之处？
JavaScript放在head和body里有什么区别？这是一个比较简单的问题，但是我平常都没注意它们的区别，感觉除了会阻塞以外，其它的也不知道还有什么区别，还有一种做法就是用JavaScript去加载其它的js文件，也就是loadJs的形式进行异步加载，它们之间到底有什么优缺点，具体说说？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（11）
从表象上来讲，就是加载速度了，写在head里面必须要加载完，body才会开始加载的。
放在head || body 无疑是加载速度的问题。
html加载是按照从下到下的顺序加载的，放在heade中的内容先加载完再加载body中的内容，所以将不需要页面加载时就要执行的js放在body底，可以加快页面的渲染。
在head部分中的js会在被调用的时候才执行，需调用才执行的脚本或事件触发执行，再者放在head里可以保证脚本在任何调用之前被加载。
在body部分中的js会在页面加载的时候被执行，当页面被加载时执行的脚本放在body部分。这样的脚本一般被用来生成页面的内容。
使用<script>标签加载 是同步的，也就是是顺序执行。浏览器在加载执行完一个js文件后才会继续解释执行下面的语句。
而异步加载，则是通知浏览器去下载这个js文件，当下载完成后执行。发送这个通知后，浏览器继续解释执行下面的语句。
优缺点：
1.同步 优点：比较好控制，对于有依赖关系的js文件必须要采用同步加载的方式
缺点：如果是没有依赖关系的js文件，同步加载文件量比较大的话，会影响浏览体验
2.异步 优点：可以几个文件同时异步加载，提高页面载入速度
缺点：不能控制文件的加载顺序
一般需要根据需要选择加载方式
例如 需要加载 一个 jquery 还有若干JQ插件。
则必须用 同步方式 加载 jquery ，而JQ插件则可以在之后通过 异步加载
在HTML body部分中的JavaScripts会在页面加载的时候被执行。
在HTML head部分中的JavaScripts会在被调用的时候才执行。
放入html的head,是页面加载前就运行，放入body中，则加载后才运行javascript的代码
所以head里面的先执行。
请看 http://www.cnblogs.com/ddyq/archive/2012/03/06/2382816.html
头部是调用的时候加载，body之间是加载的时候就加载了
简单来说：放在<head></head>里的会比放在<body></body>先执行。
更深入讲：在head标签里的代码会在页面还未开始绘制之前解析并执行，在body里的代码则会在页面渲染的同时在读取到这段代码的时候就被执行了。我用以下代码进行示例说明，
<!doctype html>
<head>
<script type="text/javascript">
alert('我是head中的代码片段：n'
+'i1引用:'+document.getElementById('i1')
+"ni2引用:"+document.getElementById('i2')
+"ni3引用:"+document.getElementById('i3'));
</script></head>
<body>
<h1 id='i1'/>
<script type="text/javascript">
alert('我是body中的代码片段1：n'
+'i1引用:'+document.getElementById('i1')
+"ni2引用:"+document.getElementById('i2')
+"ni3引用:"+document.getElementById('i3'));
</script>
<h1 id='i2'/>
<script type="text/javascript">
alert('我是body中的代码片段2：n'
+'i1引用:'+document.getElementById('i1')
+"ni2引用:"+document.getElementById('i2')
+"ni3引用:"+document.getElementById('i3'));
</script>
<h1 id='i3'/>
<script type="text/javascript">
alert('我是body中的代码片段3：n'
+'i1引用:'+document.getElementById('i1')
+"ni2引用:"+document.getElementById('i2')
+"ni3引用:"+document.getElementById('i3'));
</script>
</body>
</html>
运行上述代码可以看出，在Head中的JavaScript代码执行时，i1,i2,i3这三个对象都没有进入DOM结构中，无法引用也无法操作，在body中的代码，随着Body中内容的载入到DOM结构中，script内代码可以对其之前的页面内容进行引用和操作。
JavaScript代码默认是同步执行的，不管是内嵌的还是外部的JavaScript代码，都会阻塞后续html代码的加载和渲染以及后续JavaScript的解析。这是个必要的特性，试想一下，如果你要使用某个功能，例如Jquery库的功能，把Jquery库放在你是用的代码之前（一般放在head里），这样你在其后的任何位置都可以无限制的使用Jquery的功能而不用担心其Jquery函数功能是否已经被解析载入。
但如果你这有一个JavaScript文件比较大，而这一部分的功能比较独立，没有他也不会影响页面的显示效果，那就可以考虑把它放在body的最后，即</body>之前，这样整个页面载入了，页面完全显示了才开始处理这部分JavaScript，当然，也可以loadJs等异步加载方式进行异步加载，这样就不会阻塞其他HTML和JavasScript了。
我个人还是建议放在js文件里，如果可以的话最好集中在一个文件，并压缩，在body里并且是放在body最下面异步加载。如果body里的某些元素在页面加载中需要调用js的。就另说。
至于前面有人呢说放在head里会更好，暂时还没体验出来，而且在以前infoq大会上大家也建议放在body底部，尽量异步加载。
其实前面的各位前辈已经说明白两者的区别了。我最近看了一本书，书里面的推荐是对于很多不是需要提前加载的脚本尽量放在BODY中，用以提高加载的速度，减少HEAD的负担。而且尽量是放在BODY的最后。
w3c上是建议放在<head>里区别在于
1在HTML body部分中的JavaScripts会在页面加载的时候被执行。
<html>
<head>
</head>
<body>
<script type=”text/javascript”>
….
</script>
</body>
2在HTML head部分中的JavaScripts会在被调用的时候才执行。
<html>
<head>
<script type=”text/javascript”>
….
</script>
</head>
个人建议：将JavaScript标识放置<Head>... </Head>在头部之间，使之在主页和其余部分代码之前预先装载，从而可使代码的功能更强大；这种区别在小程序上是看不出的，当运行很大很复杂的程序时，就可以看出了。
客户端脚本一般放在 <head> </head> 之间，而且要用 <!-- --> 把代码括起来。
如果浏览器不支持此脚本，那么浏览器会
跳过它，不去执行，也不会提出错误信息