html文件中Js执行顺序解析
目录
html文件中js执行顺序受js代码位置、是否使用第三方库等因素影响，那具体有哪些规则呢？我们一起来做个测试。
常规顺序
代码：
html1.html
<html> <head> <title>测试JS的执行顺序</title> <script type="text/javascript"> console.log("head中的js，最先执行"); </script> </head> <body onload="console.log('body onload 最后执行');"> <script type="text/javascript"> console.log("body中间，执行1"); </script> <p> 测试JS的执行顺序，总结：</br> 1、按照html文件结构执行，先执行head，再执行body，最后执行onload方法；</br> 2、各部分内部，按照代码所在先后位置顺序执行； 3、引用外部js，也遵循上述原则。 </p> <script type="text/javascript"> console.log("body中间，执行2"); </script> <script type="text/javascript" src="temp.js" charset="UTF-8"></script> </body> </html>
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
<html> <head> <title>测试JS的执行顺序</title> <script type="text/javascript" src="temp.js" charset="UTF-8"></script> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ console.log("head中用jquery的ready"); }); (function(){ console.log("head中自调用函数"); } )(); </script> </head> <body onload="console.log('body onload 最后执行');"> <p>我是第一个段落</p> <div> <ul> <li>元素1 </li> <li>元素2 </li> </ul> <//div> <script type="text/javascript"> $(document).ready(function(){ console.log("body中用jquery的ready"); }); </script> <script type="text/javascript"> console.log("body中间，执行1"); </script> <script type="text/javascript"> (function(){ console.log("body中用自调用匿名函数"); } )(); </script> <p> 测试JS的执行顺序，带jQuery，总结：onload前先处理jquery的ready</br> 1、先执行head，再执行body，再处理jquery的ready，最后执行onload；</br> 2、各部分按照位置优先原则。</br> 3、针对jquery的onload需要页面上所有的资源都加载上之后执行，而ready则是DOM文档树已经解析完成时，</br> 说ready比onload快最显著的是比如一个页面上有一个很大的图片，加载要好久，onload只有在图片加载完成之后执行，而ready不必等图片加载完成</br> </p> <script type="text/javascript"> console.log("body中间，执行2"); </script> </body> </html>
temp.js
console.log("引用外部js中的代码段!");
执行结果：
结论，先ready再onload
针对onload需要页面上所有的资源都加载上之后执行，而ready则是DOM文档树已经解析完成时执行， ready比onload快最显著的是，比如一个页面上有一个很大的图片，加载要好久，onload只有在图片加载完成之后执行，而ready不必等图片加载完成就执行。
使用ifram时，ifram内部js何时执行？
代码
Html1.html
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <title>测试JS的执行顺序</title> <script type="text/javascript" src="temp.js" charset="UTF-8"></script> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ console.log("head中用jquery的ready"); }); (function(){ console.log("head中自调用函数"); } )(); //需在页面加载完成后执行的操作 function lastestFunc(){ console.log("执行页面滚动特效处理等操作"); }; // 页面加载时判断frameObj是否加载 window.onload = function(){ console.log("执行主页面，js中的onload方法"); var frameObj= document.getElementById("frameID"); // 如果已加载则执行方法 if (frameObj.attachEvent){// IE frameObj.attachEvent("onload", function(){ lastestFunc(); }); }else { // 非IE frameObj.onload = function(){ lastestFunc(); }; }}; </script> </head> <!--<body οnlοad="console.log('body onload 最后执行');"> --> <body> <p>我是第一个段落</p> <div> <ul> <li>元素1 </li> <li>元素2 </li> </ul> </div> <div> <iframe border="0" id="frameID" src="./iframPage.html" frameborder="0" frameborder="0" height="100%" width="100%"></iframe> </div> <script type="text/javascript"> $(document).ready(function(){ console.log("body中用jquery的ready"); }); </script> <script type="text/javascript"> console.log("body中间，执行1"); </script> <script type="text/javascript"> (function(){ console.log("body中用自调用函数"); } )(); </script> <p> <br> 通过window.onload方法重写onload，实现先展示ifram中元素和脚本调用后，再执行本页面的onload方法，</br> 从而达到页面元素全部展示后，再执行想要的页面效果，比如：就业列表的滚动效果 </p> <script type="text/javascript"> console.log("body中间，执行2"); </script> </body> </html>
iframPage.html
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <title></title> <script> console.log("执行内嵌ifram页面的js！"); </script> </head> <body> <p>我是内嵌页面</p> </body> </html>
temp.js
console.log("引用外部js中的代码段!");
执行结果
结论，ifram内代码在ready后，onload前执行
原创，from良师
版权声明：本文为BlueSea_W原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。