JavaScript 写在head, body的区别

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

[javascript]  view plain  copy
  1. <head>    
  2. <script type="text/javascript">    
  3. alert('我是head中的代码片段:\n'    
  4. +'i1引用:'+document.getElementById('i1')    
  5. +"\ni2引用:"+document.getElementById('i2')    
  6. +"\ni3引用:"+document.getElementById('i3'));    
  7. </script></head>    
  8. <body>    
  9. <h1 id='i1'/>    
  10. <script type="text/javascript">    
  11. alert('我是body中的代码片段1:\n'    
  12. +'i1引用:'+document.getElementById('i1')    
  13. +"\ni2引用:"+document.getElementById('i2')    
  14. +"\ni3引用:"+document.getElementById('i3'));    
  15. </script>    
  16. <h1 id='i2'/>    
  17. <script type="text/javascript">    
  18. alert('我是body中的代码片段2:\n'    
  19. +'i1引用:'+document.getElementById('i1')    
  20. +"\ni2引用:"+document.getElementById('i2')    
  21. +"\ni3引用:"+document.getElementById('i3'));    
  22. </script>    
  23. <h1 id='i3'/>    
  24. <script type="text/javascript">    
  25. alert('我是body中的代码片段3:\n'    
  26. +'i1引用:'+document.getElementById('i1')    
  27. +"\ni2引用:"+document.getElementById('i2')    
  28. +"\ni3引用:"+document.getElementById('i3'));    
  29. </script>    
  30. </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了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值