页面中的js执行顺序
2009-05-28 02:37
591 查看
起因
最近找工作，常常有面试官问我页面中js的执行顺序：在页面的head标签中添加一段js代码，在页面的尾部也就是</body>之前添加一段代码，然后在body的onload事件中引用一个函数，此三者的执行顺序如何，为什么？惭愧的很，虽然用asp.net做页面很久了，但是从来没有一颗“知其然”必要“知其所以然”的心。虽然依稀知道大概的执行顺序，但是往往没有太多底气，也不知其缘由。遂，今日测试一番，顺便究其缘由，如若有“大虾”路过看到此文中的错漏还请指点一二。
测试代码
此测试代码以及其简单的Js代码来做测试。页面从head到body结束的代码段
<head runat="server">
<title>测试js的执行顺序</title>
<script language="javascript" type="text/javascript">
var a = "这是一段在Header里面的JS代码";
alert(a);
</script>
</head>
<body onload="javscript:alert('这是在body的Onload事件中的代码！');">
<form id="form1" runat="server">
<div>
<p>测试一下js的执行顺序
</p>
</div>
</form>
<script language="javascript" type="text/javascript">
var a = "这是一段页面最后的JS代码";
alert(a);
</script>
</body>
function show_hide(obj){ if (obj.className=="haHiddenAreaOpration")
{var divExpanded=obj.parentNode;divExpanded.style.display="none";var divExpandedID=divExpanded.id.toString();document.getElementById(divExpandedID.replace("S","F")).style.display="block";}
else{obj.style.display="none";document.getElementById(obj.id.replace("F","S")).style.display="block";}}
演示结果
演示结果跟我印象中的是一样的，但是之前的确只是印象，就是说在我脑海里没有确切的证据表明此“命题”为真，奉上截图以说明：
以上三张图从左至右依次为head中Js，页面最后的js执行和body标签onload事件中的Js执行的图示。这说明了执行的顺序为：head中的js,页面中的js(将此段Js放置在body标签之外亦为此顺序),body标签onload事件中的js.
究其原因
其实原因很简单，页面顺序执行，自然是先执行<head>标签里面的js代码，大家可以看到在左边第一张图中页面除了对话框之外，没有页面的其他内容，说明Body之类的内容还未呈现。接着页面继续顺序执行页面代码，直至结束，从上图中的第二张图可以看出，页面在呈现了页面的所有标签之后，执行了body最后的js代码。对于Body的事件onload中的代码，由于Onload的事件是在页面所有元素呈现完成之后才会调用onload的代码，因此我们会看到最后执行的是Onload中的代码。总结
其实就是这么简单，只是在平常的开发中没有注意到这些细节。其实要说的是，多注意一些细节，会让自己更明白“所以然”。简单的东西容易被忽略，知其然须知其所以然。a:link, a:active{color:#1a8bc8; text-decoration:none}
a:visited{color:#1a8bc8; text-decoration:none}
a:hover{color:#56b6e9}
body{ color: #666; line-height: 1.5em;font-family: "verdana","ms song","宋体","Arial","微软雅黑", "Helvetica", "sans-serif";font-size: 14px;margin:0px; padding:0px}
img{border:0px none}
td{color:#454545; font-family:verdana,geneva,arial,helvetica,sans-serif; font-size:12px; line-height:120%}
.header{background-color:#fff; background-image:url(images/bg_header.jpg); background-repeat:no-repeat; border-bottom:1px dotted #8b8d72; height:145px; padding-left:264px; padding-top:50px}
a.headermaintitle:visited, a.headermaintitle:active, a.headermaintitle:link{color:#000; font-size:18px; font-weight:bold; text-decoration:none}
a.headermaintitle:hover{color:#f51}
#leftcontent{background-color:#fff; border-color:#8b8d72; border-style:dotted dotted solid; border-width:1px 1px 8px; font-family:arial; font-size:12px; left:20px; position:absolute; top:110px; width:220px}
#leftcontentcontainer h1{font-size:13px}
#leftcontentcontainer h3{font-size:13px}
#leftcontentcontainer h2{font-size:13px}
#leftcontentcontainer{padding:10px}
#centercontent{padding-left:260px; padding-right:20px; padding-top:25px}
a.menu:link, a.menu:visited, a.menu:active{color:black}
a.menu:hover{color:#56b6e9}
#rightcontent{background:#fff none repeat scroll 0%; position:absolute; right:10px; top:70px; width:200px}
#mytopmenu{background-color:white; border-color:-moz-use-text-color #8b8d72 rgb(139,141,114); border-style:none dotted dotted; border-width:0px 1px 1px; font-size:12px; margin-left:260px; margin-right:20px; margin-top:0px; padding:5px 10px; text-align:left}
#mylinks{font-size:12px; margin-bottom:0px; margin-top:0px; padding:0px 12px; text-align:left}
#mylinks a{text-decoration:underline}
#mystats{font-size:12px; margin-bottom:0px; margin-top:0px; padding-bottom:0px; padding-top:0px; text-align:right}
.footer{background-image:url(images/bg_footer.gif); color:#8b8d72; line-height:20px; margin-left:260px; margin-right:19px; margin-top:0px; padding:12px 12px 12px 10px; text-align:center}
.day{background-color:white; border:1px dotted #8b8d72; color:#4b4b4b; margin-bottom:20px; padding:20px}
.daytitle{font-size:13px; font-weight:bold; margin-bottom:20px; text-transform:uppercase}
.postseparator{background-image:url(images/line.gif); border-top:0px dotted #8b8d72; height:10px; margin-bottom:20px; margin-top:20px}
.news{font-family:verdana; font-size:12px; font-weight:bold}
.newsitem{margin-bottom:20px; margin-top:2px}
.blogstats{font-size:12px}
.entrylist{background-color:white; border:1px dotted #8b8d72; color:#7b7d62; padding:20px 20px 8px}
.listtitle{background-image:url(images/bg_listtitle.gif); background-repeat:no-repeat; color:#666; font-family:verdana; font-size:14.7px; font-weight:bold; height:21px; margin-bottom:10px}
.entrylisttitle{color:black; font-family:verdana; font-size:16px; font-weight:bold}
.entrylistdescription{margin-bottom:20px}
.entrylistitemtitle{font-size:13px; font-weight:bold; text-decoration:none}
.entrylistitempostdesc{font-size:12px}
.gallery{background-color:white; border:1px dotted #8b8d72; color:#7b7d62; padding:20px}
.gallerytitle{color:black; font-family:verdana; font-size:16px; font-weight:bold}
.gallerydescription{margin-bottom:20px}
.gallerythumbnail{padding:20px 20px 20px 0px}
.post{background-color:white; border:1px dotted #8b8d72; color:#4b4b4b; font-size:13px; padding:20px}
.posttitle{font-size:14.7px; font-weight:bold; margin-bottom:10px}
.posttitle2{text-decoration:none}
.postdesc{color:#303030; margin-top:10px; text-align:right}
.contact{background-color:white; border:1px dotted #8b8d72; font-family:verdana; font-size:12px; font-weight:bold; padding:20px 20px 20px 22px}
.comments{background-color:white; border-color:-moz-use-text-color #8b8d72 rgb(139,141,114); border-style:none dotted dotted; border-width:0px 1px 1px; font-family:verdana; font-size:12px; font-weight:bold; padding:0px 20px 20px 22px}
.commentstable{font-family:verdana; font-size:12px; margin-top:15px}
.feedback{background-color:white; border-color:#8b8d72 rgb(139,141,114) -moz-use-text-color; border-style:dotted dotted none; border-width:1px 1px 0px; margin-bottom:0px; margin-top:20px; padding:20px 20px 30px}
.feedbacktitle{font-family:verdana; font-size:12px; font-weight:bold}
.feedbackitem, .feedbacknoitems{line-height:150%; margin-bottom:0px; margin-top:20px}
.feedbacklist{list-style-image:none; list-style-position:outside; list-style-type:none; margin-left:0px; margin-right:0px; padding-left:0pt; padding-right:0pt}
.feedbacklisttitle{color:#8b8d72; font-size:9px; padding:5px 5px 5px 7px; text-transform:uppercase}
.feedbacklistsubtitle{background-color:white; border:1px dotted #8b8d72; color:#8b8d72; font-size:9px; margin-bottom:8px; padding:5px 7px 5px 5px}
.catlisttitle{background-image:url(images/bg_listtitle.gif); background-repeat:no-repeat; font-family:verdana; font-size:14.7px; height:21px; margin-bottom:10px}
.catlist{border-top:0px none; list-style-image:none; list-style-position:outside; list-style-type:none; margin:0px 0px 20px; padding-left:10px}
.catlistitem{margin-left:5px; margin-top:3px; padding:1px 0px; text-align:left}
ul{font-size:14px; list-style-image:none; list-style-position:outside; list-style-type:none; margin:0px 0px 10px 5px; padding-left:5px}
.cal{border-color:white; font-family:arial; font-size:12px; height:180px; margin-bottom:10px; margin-top:10px; width:200px}
.caltitle{background-color:#fff; font-family:verdana; font-size:12px; font-weight:normal; height:100%; margin-left:0px; padding:0px}
.calothermonthday{color:#808080}
.calselector{background-color:#ccc}
a.calnextprev, a.calnextprev:link, a.calnextprev:visited, a.calnextprev:active{color:#fff}
.calnextprev{color:#fff}
.caldayheader{background-color:white; font-weight:bold}
.calselectedday{background-color:#ccc}
.calweekendday{background-color:white}
.caltodayday{background-color:#ddd}
h1{color:#4169e1; font-size:120%; margin:10px auto; text-align:center}
.feedbacklisttitle{color:black; font-size:12px}
.feedbacklistsubtitle{color:black; font-size:12px}
h3{background-image:url(images/bg_listtitle.gif); background-repeat:no-repeat; color:#666; font-family:verdana; font-size:14.7px; height:21px; margin-bottom:10px}
a.headermaintitle:visited{color:red; font-size:18px; font-weight:bold; text-decoration:none}
a.headermaintitle:active{color:red; font-size:18px; font-weight:bold; text-decoration:none}
a.headermaintitle:link{color:red; font-size:18px; font-weight:bold; text-decoration:none}
a.headermaintitle:hover{color:white; text-decoration:underline}
.footer{display:none}
.post{border:1px solid #8b8d72; font-size:115%}
.post .posttitle2{background:transparent url(http://images.cnblogs.com/cnblogs_com/justinyoung/myPic/postLink.gif) no-repeat scroll 0%; padding-left:35px}
.post .posttitle2:link{color:royalblue; font-size:130%}
.post .posttitle2:visited{color:royalblue; font-size:130%}
.post .posttitle2:active{color:royalblue; font-size:130%}
.post .posttitle2:hover{background:transparent url(http://images.cnblogs.com/cnblogs_com/justinyoung/myPic/postLink2.gif) no-repeat scroll 0%; color:crimson; font-size:130%}
.postdesc{font-size:9pt}
.yzy_email{float:right; margin:0px}
.yzy_email a:link, .yzy_email a:visited, .yzy_email a:hover, .yzy_email a:active{background:transparent url(http://images.cnblogs.com/cnblogs_com/justinyoung/myPic/mailBG1.gif) no-repeat scroll 0%; color:black; display:block; height:33px; padding-top:10px; text-decoration:none; text-indent:3em; width:90px}
.yzy_email a:hover{background:transparent url(http://images.cnblogs.com/cnblogs_com/justinyoung/myPic/mailBG2.gif) no-repeat scroll 0%}
.yzy_message{float:left; margin:0px 0px 0px 1px}
.yzy_message a:link, .yzy_message a:visited, .yzy_message a:hover, .yzy_message a:active{background:transparent url(http://images.cnblogs.com/cnblogs_com/justinyoung/myPic/message1.gif) no-repeat scroll 0%; color:black; display:block; height:33px; padding-top:10px; text-decoration:none; text-indent:3em; width:90px}
.yzy_message a:hover{background:transparent url(http://images.cnblogs.com/cnblogs_com/justinyoung/myPic/message2.gif) no-repeat scroll 0%}
/**你只需要将下面这段css代码，复制到你博客后台配置项中的“通过CSS定制页面”框内即可！**/
h4{color:red; margin:0; padding:0; font-size:105%}
h5{color:deeppink; margin:0.2em 0; padding:0;font-size:100%;}
h6{color:teal;font-weight:normal; font-size:100%; margin:0; padding:0}
strong{font-weight:bold; color:blue}
.floatlpic{float:left; color:teal; font-size:9pt; text-align:center; border:1px dotted #ccc; padding:2px}
.floatrpic{float:right; color:teal; font-size:9pt; text-align:center; border:1px dotted #ccc; padding:2px}
.floatmpic{color:teal; font-size:9pt; text-align:center; border:1px dotted #ccc; padding:5px 2px 2px 2px; margin:0 10px 15px 10px;}
.floatlpic img, .floatrpic img, .floatmpic img{clear:both}
p{text-indent:2em; margin-top:0}
blockquote{background:url('http://images.cnblogs.com/cnblogs_com/justinyoung/2008_1q/blockquote.gif') no-repeat 5px top;margin:0 0 15px 0;padding-left:4.5em;padding-top:1em;padding-right:3em;}
.hiddenarea{ border:1px solid #ccc;padding:auto 5px;word-break: break-all; background-color: #eee;font-size:9pt;margin:2em auto;text-align:left;}
/*折叠显示样式*/
.hiddenarea{border:1px solid #ccc;padding:0px 5px 2px 5px;word-break: break-all; background-color: #eee;font-size:12px;margin:2em auto;word-break: break-all; }
.imgcontracted,.imgexpanded{margin-left:5px;cursor:pointer;}
.hacontracted{cursor:pointer;}
.showtext{border:1px solid #aaa;padding:2px 5px 0 5px;cursor:hand;margin-left:1em;cursor:pointer;background-color:#fff;}
.haexpanded{display:none;}
.hamain{padding:5px;clear:both;}
.hahiddenareaopration{border-bottom:2px solid #ccc;
cursor:pointer;}
/*折叠显示样式结束*/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 页面中的js执行顺序
- JS_001:web页面js加载执行顺序
- 页面中js执行顺序
- js 页面载入时的执行顺序
- 关于Ajax load页面中js部分$(function(){})的执行顺序
- 页面中的js和jquery的执行顺序
- 页面中js执行顺序----
- 页面中js执行顺序
- 页面中js执行顺序----
- js在页面中的加载顺序及多个jquery $(document).ready() 的执行顺序
- 关于在页面里加载和执行JS顺序的问题
- JS在页面中的执行顺序
- js中页面加载完成后执行的几种方式及执行顺序
- 关于HTML页面中JS/JQ/Onload执行顺序测试代码
- iframe与父页面中JS执行顺序控制
- 让页面加载完成后执行js
- [js]变量声明、函数声明、函数定义式、形参之间的执行顺序
- js页面加载完后执行（document.onreadystatechange 和 document.readyState）
- Javascript在页面加载时的执行顺序
- 当jsp页面完全加载完成后执行一个js函数