javascript在網頁頁面加載時的執行順序

javascript在網頁頁面加載時的執行順序

javascript在頁面的執行順序

1、頁面上的javascript代碼是HTML文檔的一部分，所以javascript在頁面裝載時執行的順序就是其引入標記<[script /]>的出現順序， <[script /]>標記裡面的或者通過src引入的外部JS，都是按照其語句出現的順序執行，而且執行過程是文檔裝載的一部分。


3、變量的調用，必須是前面已經聲明，否則獲取的變量值是undefined。
<br /><[script type="text/javscrpt"]>//(![CDATA[<br />alert(tmp); //輸出 undefined<br />var tmp = 1;<br />alert(tmp); //輸出 1<br />//]]><[/script]><br />
5、document.write()會把輸出寫入到腳本文檔所在的位置，瀏覽器解析完documemt.write()所在文檔內容後，繼續解析document.write()輸出的內容，然後在繼續解析HTML文檔。
<br /><[script type="text/javascript"]>//(![CDATA[<br /> document.write('<[script type="text/javascript" src="test.js"]><\/script>');<br /> document.write('<[script type="text/javascript"]>');<br /> document.write('alert(2);')<br /> document.write('alert("我是" + tmpStr);');<br /> document.write('<\/script>');<br /> //]]>(/script><br /> <[script type="text/javascript"]>//(![CDATA[<br /> alert(3);<br /> //]]><[/script]><br />
test.js的內容是：

var tmpStr = 1;
alert(tmpStr);

在Firefox和Opera中的彈出值的順序是：1、2、我是1、3

在IE中彈出值的順序是：2、1、3，同時瀏覽器報錯：tmpStr未定義

原因可能是IE在document.write時，並未等待加載SRC中的javascript代碼完畢後，才執行下一行，所以導致2先彈出，並且執行到 document.write(』document.write("我是" + tmpStr)』)調用tmpStr時，tmpStr並未定義，從而報錯。

解決這個問題，可以利用HTML解析是解析完一個HTML標籤，再執行下一個的原理，把代碼拆分來實現：
<br /><[script type="text/javascript"]>//(![CDATA[<br /> document.write('<[script type="text/javascript" src="test.js"]><\/script>');<br /> //]]><[/script]><br /> <[script type="text/javascript"]>//(![CDATA[<br /> document.write('<[script type="text/javascript"]>');<br /> document.write('alert(2);')<br /> document.write('alert("我是" + tmpStr);');<br /> document.write('<\/script>');<br /> //]]><[/script]><br /> <[script type="text/javascript"]>//(![CDATA[<br /> alert(3);<br /> //]]><[/script]><br />
這樣IE下和其他瀏覽器輸出值的順序都是一直的了：1、2、我是1、3。

三、如何改變javascript在頁面的執行順序

1、利用onload
<br />(script type="text/javascript">//(![CDATA[<br />window.onload = f;<br />function f(){alert(1);}<br />alert(2);<br />//]]><[/script]><br />
輸出值順序是 2、1。

需要注意的是，如果存在多個winodws.onload的話，只有最有一個生效，解決這個辦法是：

window.onload = function(){f();f1();f2();.....}