DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 淺談JavaScript 的執行順序
淺談JavaScript 的執行順序
編輯:關於JavaScript     

雖然現代浏覽器可以並行的下載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); // undefined
var a = 1;
console.log(a); // 1

預解析函數

f(); // 1
function 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、結束

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved