起因
最近找工作，常常有面试官问我页面中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 οnlοad="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>
演示结果
演示结果跟我印象中的是一样的，但是之前的确只是印象，就是说在我脑海里没有确切的证据表明此“命题”为真，奉上截图以说明：
以上三张图从左至右依次为head中Js，页面最后的js执行和body标签onload事件中的Js执行的图示。这说明了执行的顺序为：head中的js,页面中的js(将此段Js放置在body标签之外亦为此顺序),body标签onload事件中的js.
究其原因
其实原因很简单，页面顺序执行，自然是先执行<head>标签里面的js代码，大家可以看到在左边第一张图中页面除了对话框之外，没有页面的其他内容，说明Body之类的内容还未呈现。接着页面继续顺序执行页面代码，直至结束，从上图中的第二张图可以看出，页面在呈现了页面的所有标签之后，执行了body最后的js代码。对于Body的事件onload中的代码，由于Onload的事件是在页面所有元素呈现完成之后才会调用onload的代码，因此我们会看到最后执行的是Onload中的代码。
总结
其实就是这么简单，只是在平常的开发中没有注意到这些细节。其实要说的是，多注意一些细节，会让自己更明白“所以然”。简单的东西容易被忽略，知其然须知其所以然。
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
