页面中的js执行顺序

来源：互联网发布：猎豹wifi mac 编辑：程序博客网时间：2024/05/02 02:00

转载地址：http://www.cnblogs.com/iceWolf/archive/2009/05/28/1491215.html

起因

最近找工作，常常有面试官问我页面中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>

演示结果

演示结果跟我印象中的是一样的，但是之前的确只是印象，就是说在我脑海里没有确切的证据表明此“命题”为真，奉上截图以说明：

以上三张图从左至右依次为head中Js，页面最后的js执行和body标签onload事件中的Js执行的图示。这说明了执行的顺序为：head中的js,页面中的js(将此段Js放置在body标签之外亦为此顺序),body标签onload事件中的js.

究其原因

其实原因很简单，页面顺序执行，自然是先执行<head>标签里面的js代码，大家可以看到在左边第一张图中页面除了对话框之外，没有页面的其他内容，说明Body之类的内容还未呈现。接着页面继续顺序执行页面代码，直至结束，从上图中的第二张图可以看出，页面在呈现了页面的所有标签之后，执行了body最后的js代码。对于Body的事件onload中的代码，由于Onload的事件是在页面所有元素呈现完成之后才会调用onload的代码，因此我们会看到最后执行的是Onload中的代码。

总结

其实就是这么简单，只是在平常的开发中没有注意到这些细节。其实要说的是，多注意一些细节，会让自己更明白“所以然”。简单的东西容易被忽略，知其然须知其所以然。