雖然現代瀏覽器可以并行的下載JavaScript（部分瀏覽器），但考慮到JavaScript的依賴關系，他們的執行依然是按照引入順序進行的。
本文章記錄本人在學習 JavaScript 中看書理解到的一些東西，加深記憶和并且整理記錄下來，方便之后的復習。
在 html 文檔中的執行順序
js代碼執行順序比較的形象，用戶可以直觀的感受這種執行順序。但是，js代碼的執行順序是比較復雜的。有時候我們會把js代碼寫在html里面，而html文檔在瀏覽器中解析的過程是這樣：瀏覽器按照文檔流從上到下逐步解析頁面結構和信息。js代碼作為嵌入的腳本也算做html文檔的組成部分，因此，js代碼在裝載時的執行順序也是根據腳本標簽<script>的出現來順序來決定。（下面一個栗子）
<!DOCTYPE html><script> console.log("頂部腳本");</script><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script> console.log("頭部腳本"); </script></head><body> <script> console.log("頁面腳本"); </script></body></html><script> console.log("底部腳本");</script>還有對于通過腳本標簽<script>的src屬性導入的外部js文件腳本，它也將按照其語句出現的順序來執行，而且執行過程是文檔裝載的一部分，不會因為是外部js文件而延期執行。
// 先加載 b.js 并且執行里面的代碼<script src="b.js"></script>// 然后在按順序執行下面的代碼<script> console.log(1);</script>
預編譯
當js引擎解析的時候，它會在預編譯對所有聲明的變量和函數進行處理。
變量提升
console.log(a); // undefinedvar a = 1;console.log(a); // 1
預解析函數
f(); // 1function f() { console.log(1);};詳細：javascript變量聲明提升(hoisting)
分塊執行代碼
js是按塊執行代碼的，所謂代碼塊就是使用<script>標簽分隔的代碼段。（下面一個栗子）
<script> // 代碼段1 var a = 1;</script><script> // 代碼段2 function f() { console.log(1); };</script>因為js是按代碼塊來執行的。瀏覽器在解析html文檔流的時候，如果遇到一個<script>標簽，則js會等到這個代碼塊都加載完之后再對代碼進行預編譯，然后在執行。執行完畢后，瀏覽器會繼續解析西門的html文檔流，同時js也準備好處理下一個代碼塊。
有個小坑，由于js是按塊執行的，因此在一個js塊中調用后面塊聲明的變量或者函數就會提示語法錯誤。但是不同塊都屬于一個全局作用域，也就是說，塊之間的變量和函數是可以共享的。（下面一個栗子）
<script> // 代碼段1 console.log(a); f();</script><script> // 代碼段2 var a = 1; function f() { console.log(1); };</script>由于js是按塊處理代碼，同時又遵循html文檔流的解析順序，因此在上面的栗子中會看到語法錯誤。但是，在文檔流加載完畢后再次訪問就不會出現這種錯誤了。（下面一個栗子）
<script> window.onload = function(){ // 頁面初始化事件處理函數 // 代碼段1 console.log(a); f(); }</script><script> // 代碼段2 var a = 1; function f() { console.log(1); };</script>還有為了安全起見，一般在頁面初始化完畢之后才允許js代碼執行，這樣就可以避免一些網速對js執行的影響。同時，也避開了html文檔流對js執行的限制。
綜上所述，javascript在執行時的步驟是：
1、先讀入第一段代碼塊
2、對代碼塊進行語法分析，如果出現語法錯誤，直接執行第5步驟
3、對var變量和function定義的函數進行“預編譯處理”（賦值式函數是不會進行預編譯處理的）
4、執行代碼塊，有錯則報錯
5、如果還有下一段代碼塊，則讀入下一段代碼塊，重復步驟2
6、結束
新聞熱點
疑難解答
