1. 程式人生 > >Javascript的載入與執行順序

Javascript的載入與執行順序

1. 按塊載入並執行

對於一個HTML文件,瀏覽器的解析順序為:按照文件流,從上到下逐步解析頁面的結構。JavaScript程式碼作為通過標籤嵌入或引入的指令碼,也HTML文件的組成部分。因此,JavaScript程式碼在裝載時的執行順序也是根據指令碼標籤<script>的出現順序來確定的。

但是,瀏覽器載入JavaScript時有個特點,那就是載入之後立即就會執行(先編譯後執行),因為JavaScript可能會影響DOM樹的結構,所以瀏覽器在執行完後才能繼續載入下面的HTML內容。也就是說,瀏覽器下載並執行JavaScript的過程會阻塞DOM樹的繼續建立。所以,引入的多個js檔案,會按順序分開執行。同樣的,對於不同<script>標籤嵌入的JavaScript程式碼,也會分開執行。同一組<script>標籤包括的程式碼就是一個程式碼塊

。後引入的JavaScript檔案可以呼叫先引入的JavaScript檔案的資源,下面的程式碼塊可以訪問上面程式碼塊的資源,反之則不行。

由於JavaScript通常需要操作DOM,所以,一般把JavaScript放在</body>前或者文件結尾處引入。若需要在<head>中引入,可以通過修改window.onload或者document.ready事件,強制等到DOM載入完成後再執行相關函式。

2. 先預處理後執行

在一個JavaScript檔案或一個JavaScript程式碼塊的內部,瀏覽器會先對程式碼進行預處理(編譯),然後再執行。

預處理會跳過執行語句,只處理宣告語句,同樣也是按從上到下按順序進行的。包括變數和函式在內的所有宣告都會在任何程式碼被執行前首先被處理。

 即使宣告是在呼叫的下方進行的,但瀏覽器仍然先宣告再呼叫(執行),這個現象叫做“提升”。所以,即便一個函式的宣告在下方,在前面仍然可以正常執行這個函式。

注意1:對於宣告並賦值的語句,例如 var a = 1,在預處理階段會把這句話拆成兩句:

var a;
a = 1;

也就是說,賦值或其他邏輯運算是在執行階段進行的,在預處理階段會被忽略。

注意2:(1)函式宣告的提升優先於變數宣告的提升;(2)重複的var宣告會被忽略掉,但是重複的function宣告會覆蓋掉前面的宣告。

在預處理階段,宣告的變數的初始值是undefined, 採用function宣告的函式的初始內容就是函式體的內容。

3. 執行順序

完成預處理之後,JavaScript程式碼會從上到下按順序執行邏輯操作和函式的呼叫。

4. 參考文件