Javascript程式碼在頁面載入時的執行順序介紹_基礎知識

一、在HTML中嵌入Javasript的方法
1.直接在Javascript程式碼放在標記對<script>和</script>之間
2.由<script></script>標記的src屬性制定外部的js檔案
3.放在事件處理程序中，例如：

點擊我

4.作為URL的主體，這個URL使用特殊的Javascript：協議，例如：點擊我
5.利用javascript本身的document.write()方法寫入新的javascript程式碼
6.利用Ajax非同步取得javascript程式碼，然後執行
 

第3種和第4種方法寫入的Javascript需要觸發才能執行，所以除非特別設置，否則頁面載入時不會執行。

二、Javascript在頁面的執行順序
1.頁面上的Javascript程式碼是HTML文件的一部分，所以Javascript在頁面裝載時執行的順序就是其引入標記<script></script>的出現順序， <script></script>標記裡面的或透過src引入的外部JS，都是按照其語句出現的順序執行，而且執行過程是文件裝載的一部分。
2.每個腳本定義的全域變數和函數，都可以被後面執行的腳本所呼叫。
3.變數的調用，必須是前面已經聲明，否則獲取的變數值是undefined。

複製程式碼 程式碼如下:

4.同一段腳本，函數定義可以出現在函數呼叫的後面，但是如果是分別在兩段程式碼，且函數呼叫在第一段程式碼中，則會報函數未定義錯誤。

複製程式碼 程式碼如下:

5.document.write ()會把輸出寫入到腳本文件所在的位置，瀏覽器解析完documemt.write()所在文件內容後，繼續解析document.write()輸出的內容，然後在繼續解析HTML文件。

複製程式碼 程式碼如下:

');
    document.write('');
    //]]>
 

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標籤，再執行下一個的原理，把程式碼拆分來實現：

複製程式碼 程式碼如下:

  ');
    //]]>
 

這樣IE下和其他瀏覽器輸出值的順序都是一直的了：1、2、我是1、3。

三、如何改變Javascript在頁面的執行順序
1.利用onload

複製程式碼 程式碼如下:

輸出值順序是2、1。

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

複製程式碼 程式碼如下:

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

利用2級DOM事件類型

複製程式碼 程式碼如下:

if(document. ){
window.addEventListener('load',f,false);
window.addEventListener('load',f1,false);
...
}else{
window .attachEvent('onload',f);
window.attachEvent('onload',f1);
...
}

2.IE中可以利用defer ，defer作用是把程式碼載入下來，並不立即執行，等文件裝載完畢之後再執行，有點類似window.onload，但是沒有window.onload那樣的局限性，可以重複使用，但是只在IE中有效，所以上面的範例可以修改成為

複製程式碼 程式碼如下:

');
document.write( '');
//]]>

這樣IE就不報錯了，輸出值的順序變成：1、3、2、我是1

當HTML解析器遇到一個腳本，它必須依照常規終止對文件的解析並等待腳本執行。為了解決這個問題HTML4標準定義了defer。透過defer來提示瀏覽器可以繼續解析HTML文檔，並延遲執行腳本。這種延遲在腳本從外部文件載入時非常有用，讓瀏覽器不必等待外部文件全部載入之後才繼續執行，能有效的提高效能。 IE是目前唯一支援defer屬性的瀏覽器，但IE並沒有正確的實作了defer屬性，因為延遲的腳本總是被延遲，直到文件結束，而不是只延遲到下一個非延遲的腳本。這意味著，IE中延遲的腳本的執行順序相當混亂，並且不能定義任何後面非延遲腳本並須的函數和變數。在IE中所有的defer的腳本執行時間應該都是HTML文檔樹建立以後，window.onload之前。

3.利用Ajax。
因為xmlhttpRequest能判斷外部文件載入的狀態，所以能夠改變程式碼的載入順序