html文件中Js执行顺序解析

html文件中Js执行顺序解析

目录

常规顺序

代码：

控制台输出：

结论：先head代码再body代码

使用休眠时，“并行”还是“串行”处理？

代码

控制台输出：

结论：并行处理

使用jquery时，ready和onload谁先执行？

代码

执行结果：

结论，先ready再onload

使用ifram时，ifram内部js何时执行？

代码

执行结果

结论，ifram内代码在ready后，onload前执行

---

html文件中js执行顺序受js代码位置、是否使用第三方库等因素影响，那具体有哪些规则呢？我们一起来做个测试。

常规顺序

代码：

html1.html

  

  

      



      

  

onload="console.log('body onload 最后执行');">  

          

        


     测试JS的执行顺序，总结：


     1、按照html文件结构执行，先执行head，再执行body，最后执行onload方法；


     2、各部分内部，按照代码所在先后位置顺序执行；

     3、引用外部js，也遵循上述原则。

    

       

        



  

 

temp.js

console.log("引用外部js中的代码!");

控制台输出：

head中的js，最先执行

body中间，执行1

body中间，执行2

引用外部js中的代码!

body onload 最后执行

 

结论：先head代码再body代码

1、按照html文件结构执行，先执行head，再执行body，最后执行onload方法；

2、各部分内部，按照代码所在先后位置顺序执行；

3、引用外部js，也遵循上述原则。

使用休眠时，“并行”还是“串行”处理？

代码

上述例子html.html不变化，在temp.js中增加setTimeout，代码如下：

console.log("引用外部js中的代码111111");

setTimeout(`console.log("引用外部js中的代码,休眠5秒后执行")`, 5000);

console.log("引用外部js中的代码222222");

 

控制台输出：

 

结论：并行处理

注意，此时，body的onload方法不会等待休眠完成，而是并行处理。

 

使用jquery时，ready和onload谁先执行？

代码

Html.html

  

  

      

      

      

      

  

onload="console.log('body onload 最后执行');">  

   

   
我是第一个段落

   


      


      
元素1

      

      
元素2

      

      

      
  

   /div>

   

   

         

   

          



         



        


     测试JS的执行顺序，带jQuery，总结：onload前先处理jquery的ready


     1、先执行head，再执行body，再处理jquery的ready，最后执行onload；


     2、各部分按照位置优先原则。




   3、针对jquery的onload需要页面上所有的资源都加载上之后执行，而ready则是DOM文档树已经解析完成时，


   说ready比onload快最显著的是比如一个页面上有一个很大的图片，加载要好久，onload只有在图片加载完成之后执行，而ready不必等图片加载完成


    

         

  

 

 

temp.js

console.log("引用外部js中的代码段!");

 

执行结果：

 

结论，先ready再onload

针对onload需要页面上所有的资源都加载上之后执行，而ready则是DOM文档树已经解析完成时执行， ready比onload快最显著的是，比如一个页面上有一个很大的图片，加载要好久，onload只有在图片加载完成之后执行，而ready不必等图片加载完成就执行。

使用ifram时，ifram内部js何时执行？

代码

Html1.html

html>



   http-equiv="Content-Type" content="text/html; charset=utf-8"/>

   http-equiv="X-UA-Compatible" content="IE=edge"/>

      

      

      

    

  





我是第一个段落

   


      


      
元素1

      

      
元素2

      

      
  

   
   

      
   
  
  
         
  
         
         

        

         通过window.onload方法重写onload，实现先展示ifram中元素和脚本调用后，再执行本页面的onload方法，

         从而达到页面元素全部展示后，再执行想要的页面效果，比如：就业列表的滚动效果
    
        
 
 

 

iframPage.html

html>



    http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    http-equiv="X-UA-Compatible" content="IE=edge"/>











我是内嵌页面

 

temp.js

console.log("引用外部js中的代码段!");

执行结果

 

结论，ifram内代码在ready后，onload前执行

原创，from良师