js script放在head和body里面的区别

最新推荐文章于 2024-04-02 22:49:09 发布
最新推荐文章于 2024-04-02 22:49:09 发布
阅读量130 收藏
点赞数
分类专栏： web前端 文章标签： js javascript head body ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/grefr2/article/details/84524680
版权
详见： http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp66   
 
  java script放在head和body的区别
  
  1，在head中时，所代表的functions只加载而不执行，执行是在某一事件触发后才开始。
  2，在body中时，直接加载并执行
 
  
典型的区别：
 
  
如果有不在函数中的执行语句，比如变量初始化，如果在head中就不会执行。
 
  
 
  
例如：
 
  
 
   
 
    
 
     [html] 
     view plain 
     copy 
     

         
     
 
    
 
   
 
   
  1. <html>  
  2.     <head>  
  3.     <title>第一个Html5视频测试</title>  
  4.         <script type="text/javascript">  
  5.             var myVideo=document.getElementById("video1");  
  6.               
  7.             function playPause()  
  8.             {   
  9.                 if (myVideo.paused)   
  10.                   myVideo.play();   
  11.                 else   
  12.                   myVideo.pause();   
  13.             }   
  14.         </script>   
  15.     </head>  
  16.     <body>  
  17.         <div style="text-align:center;">  
  18.             <button onclick="playPause()">播放/暂停</button>   
  19.             <br/>   
  20.             <video id="video1" src="mov_bbb.ogg" width="320" height="240" controls="controls">  
  21.                 Your browser does not support the video tag.  
  22.             </video>  
  23.         </div>  
  24.     </body>  
  25. </html>  
 
  
 
  
点击“播放/暂停”时，playPause会被执行，但执行时myVideo对象没有定义的，因为定义和初始化语句被有执行过。
 
  
如果要执行，需要放在body
 
  
 
   
 
    
 
     [html] 
     view plain 
     copy 
     

         
     
 
    
 
   
 
   
  1. <html>  
  2.     <head>  
  3.     <title>第一个Html5视频测试</title>  
  4.     </head>  
  5.     <body>  
  6.         <div style="text-align:center;">  
  7.             <button onclick="playPause()">播放/暂停</button>   
  8.             <br/>   
  9.             <video id="video1" src="mov_bbb.ogg" width="320" height="240" controls="controls">  
  10.                 Your browser does not support the video tag.  
  11.             </video>  
  12.         </div>  
  13.         <script type="text/javascript">  
  14.             var myVideo=document.getElementById("video1");  
  15.               
  16.             function playPause()  
  17.             {   
  18.                 alert("AA");  
  19.                 if (myVideo.paused)   
  20.                   myVideo.play();   
  21.                 else   
  22.                   myVideo.pause();   
  23.             }   
  24.         </script>   
  25.     </body>  
  26. </html>  
 
  
 
  
当然，javascript放在head中有其他的好处的，所以，如果必须放在head中，变量初始化需要另外想办法
 
 
 


                

        

        




    

  


    

      

        

            

              
                
                  grefr2
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
JS放在head和body的区别

				
			

			

				

					weixin_34384681的博客
				

				

					09-07
					
					2117
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	



                

            
              



	

		

			

				
					
script标签放在head内和body内有什么区别

				
			

			

				

					Jack Lee's blogs
				

				

					03-15
					
					3086
					
				

			

		

		

			
				
加载的顺序不一样，你可以把ＨＴＭＬ看成从上往下加载的。
例如在网速慢的情况下把ｊｓ代码放在ｂｏｄｙ底部用户会先看到网页结构，等ｊｓ加载完成后才出现特效
区别简述：
在HTML body部分中的JavaScripts会在页面加载的时候被执行。
在HTML head部分中的JavaScripts会在被调用的时候才执行，但是在主页和其余部分代码之前预先装载。
——————————————————————...

			
		

	



              


  
              

                


	

		

			

				
					
js放在head里和body里的差别

				
			

			

				

					samwangzhibo
				

				

					10-17
					
					1062
					
				

			

		

		

			
				
1，在head中时，所代表的functions只加载而不执行，执行是在某一事件触发后才开始。
  2，在body中时，直接加载并执行典型的区别：如果有不在函数中的执行语句，比如变量初始化，如果在head中就不会执行。例如：html>      head>      title>第一个Html5视频测试title>          script type="text/javascript">   

			
		

	





	

		

			

				
					
Js放在head和body中的区别

				
			

			

				

					Caster_Saber的专栏
				

				

					02-21
					
					3227
					
				

			

		

		

			
				
在HTML body部分中的JavaScripts会在页面加载的时候被执行。
在HTML head部分中的JavaScripts会在被调用的时候才执行。

一、区别
浏览器解析html是从上到下的。
如果把javascript放在head里的话，则先被解析,但这时候body还没有解析，所以会返回空值。一般都会绑定一个监听，当全部的html文档解析完之后，再执行代码：
   windows.onl

			
		

	



		

			
		



	

		

			

				
					
JS代码放在head和body的区别

				
			

			

				

					iteye_8535的博客
				

				

					11-12
					
					392
					
				

			

		

		

			
				
    由于在页面中总是难免javascript脚本语言，在代码中看到body里可以放脚本，而head里也可用脚本，想要用好他们，就得了解他们的区别，经过自己的总结发现他们的区别如下：
一、在head主体里写，如果有方法体，那么就是在客户点击的时候触发，如果没写方法体，比如引入的js文件，那么在加载页面前就预加载了。
二、写在body主体里，是为了实现某些部分动态地创建文档。 这里比如制作鼠标...

			
		

	





	

		

			

				
					
JS代码放在head和body中的区别分析

				
			

			

				

					12-10
				

			

		

		

			
				
总结一下，JavaScript代码放在`<head>`和`<body>`中的主要区别在于执行时机：  1. 放在`<head>`：代码会尽早执行，但可能在某些依赖的HTML元素解析之前，这可能导致错误，除非代码是与用户交互事件关联的函数。 2. ...

			
		

	





	

		

			

				
					
js面试题:1script标签放在header里和放在body底部里有什么区别?；2.什么是同步和异步?

				
			

			

				

					xiaolu567的博客
				

				

					08-30
					
					966
					
				

			

		

		

			
				
JS 是一门单线程的编程语言，这就意味着一个时间里只能处理一件事，也就是说JS引擎一次只能在一个线程里处理一条语句。

			
		

	





	

		

			

				
					
head和body引入js的问题

					
最新发布

				
			

			

				

					qq_16546829的博客
				

				

					04-02
					
					790
					
				

			

		

		

			
				
为什么有些js需要在body中引入

			
		

	





	

		

			

				
					
为什么＜link＞标签放在＜head＞内，而带javascript的链接尽量放在＜/body＞前

				
			

			

				

					Eraser_XIU的博客
				

				

					09-15
					
					2184
					
				

			

		

		

			
				
1、<link>标签放在<head></head>之间：
a. 规范要求；
b. 让页面逐步呈现，提高用户体验；
c. 防止呈现空白页面或没有样式的内容；
d. 如果把样式表放在文档底部，那么很多浏览器（例如Internet Explorer）不能逐步呈现页面。一些浏览器会阻止渲染，以避免在页面样式发生变化时，重新绘制页面中的元素。

2、<script>标签放在</body>之前：
a. 脚本在下载和执行期间会阻止HTML解析。把<scri

			
		

	





	

		

			

				
					
JS代码放在head和body中的区别分析总结**

				
			

			

				

					weixin_47071411的博客
				

				

					09-10
					
					444
					
				

			

		

		

			
				
JS代码放在head和body中的区别分析
1.在收藏夹里面收藏了三个回答不错
2.放在head里的js分析
3.放在body里面的js分析
4.一些总结

			
		

	





	

		

			

				
					
javaScript放在<head>和<body>的区别

				
			

			

				

					JAVAGirl
				

				

					04-03
					
					348
					
				

			

		

		

			
				
javaScript放在和的区别：

在HTML body部分中的JavaScript会在页面加载的时候被执行。
在HTML head部分中的JavaScript会在被调用的时候才执行。

head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时，可以保证脚本在任何调用之前被加载。
body 部分中的脚本: 当页面被加...

			
		

	





	

		

			

				
					
页面标签<head></head>之间与<body></body>之间放JS有区别吗？

				
			

			

				

					weixin_30454481的博客
				

				

					09-19
					
					409
					
				

			

		

		

			
				
今天不用上班！哈哈！言归正传》今看JS时突然想到这个问题：
严格来讲有区别。javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面，因为初始化都要求提前进行（如给页面body设置css等）；而如果是通过事件调用执行的function那么对位置没什么要求的。因而除...

			
		

	





	

		

			

				
					
JavaScript放在head和body里的区别

				
			

			

				

					小猪的旅途
				

				

					08-21
					
					1496
					
				

			

		

		

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

  
  
alert('我是head中的代码片段：\n'  
+'i1引用:'+document.getElementById('i1')  
+"\ni2引用:"+document.getElementById('i2')

			
		

	





	

		

			

				
					
JS代码放在head和body中的区别

				
			

			

				

					weixin_30617561的博客
				

				

					11-24
					
					67
					
				

			

		

		

			
				
放在head中的JS代码会在页面加载完成之前就读取，而放在body中的JS代码，会在整个页面加载完成之后读取。
那么有什么不同呢？先看一个例子：
一个二级级联动态下拉列表框，一级分类（即大类别）id="vSort0".


<head>function changelocation(id){…………}</head><body><select c...

			
		

	





	

		

			

				
					
JS代码放在head与body中的区别

				
			

			

				

					likepotato的博客
				

				

					06-08
					
					215
					
				

			

		

		

			
				
head：需调用、事件触发才执行
body：页面加载时执行，生成页面内容



			
		

	





	

		

			

				
					
JS放在head和放在body中的区别

				
			

			

				

					巴里大叔的博客
				

				

					10-06
					
					592
					
				

			

		

		

			
				
JS放在head和放在body中的区别


在HTML body部分中的JavaScripts会在页面加载的时候被执行。
在HTML head部分中的JavaScripts会在被调用的时候才执行。
 
一、区别
浏览器解析html是从上到下的。
如果把javascript放在head里的话，则先被解析,但这时候body还没有解析，所以会返回空值。一般都会绑定一个监听，当全部的htm

			
		

	





	

		

			

				
					
js放到head之间和body之间的区别

				
			

			

				

					power_guoxinzhao的专栏
				

				

					10-13
					
					1146
					
				

			

		

		

			
				
在做web项目中，js是我们必不可少的一样前台语言。通常我们编写js有两种方式 ；

一种是将js 放置&lt;head&gt;&lt;/head&gt; 之间 一种是将js 放置&lt;body&gt;&lt;/body&gt; 之间。那么这两种到底有什么区别呢？

1.放在head之间的js是会在加载页面的过程进行读取 也就是说在整个页面加载完成之前就进行了读取。

  放在body是在页面加...

			
		

	





	

		

			

				
					
script放在head里好还是放在body里好

				
			

			

				

					06-08
				

			

		

		

			
				
一般情况下，将 JavaScript 的 `<script>` 放在 `<body>` 标签的最后是更好的做法，因为这样可以优化页面的加载速度。当浏览器解析 HTML 时，如果遇到在 `<head>` 中的 JavaScript，它将会阻塞页面的渲染，直到 ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值