JavaScript 写在head, body的区别

最新推荐文章于 2022-12-22 15:09:15 发布

原创最新推荐文章于 2022-12-22 15:09:15 发布 · 583 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文探讨了JavaScript代码放置在<head>与<body>标签中的执行时机差异，以及这对DOM操作的影响。当JavaScript位于<head>标签时，在页面渲染前执行，此时无法操作DOM元素；而位于<body>标签内的JavaScript则随页面渲染过程按顺序执行，能够即时操作已加载的DOM元素。

一般来说，放在<head></head>里的会比放在<body></body>先执行。在head标签里的代码会在页面还未开始绘制之前解析并执行，在body里的代码则会在页面渲染的同时在读取到这段代码的时候就被执行了。

[javascript]view plain copy
<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>    

运行上述代码可以发现，在在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了。