JS學習筆記 - 分析 JavaScript 的執行順序

時間 2019-11-06

標籤學習筆記分析 javascript 執行順序欄目 JavaScript 简体版

原文原文鏈接

本文章記錄本人在學習 JavaScript 中看書理解到的一些東西，加深記憶和而且整理記錄下來，方便以後的複習。javascript

在 html 文檔中的執行順序

js代碼執行順序比較的形象，用戶能夠直觀的感覺這種執行順序。可是，js代碼的執行順序是比較複雜的。有時候咱們會把js代碼寫在html裏面，而html文檔在瀏覽器中解析的過程是這樣：瀏覽器按照文檔流從上到下逐步解析頁面結構和信息。js代碼做爲嵌入的腳本也算作html文檔的組成部分，所以，js代碼在裝載時的執行順序也是根據腳本標籤<script>的出現來順序來決定。（下面一個栗子）html

<!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文件而延期執行。java

// 先加載 b.js 而且執行裏面的代碼
<script src="b.js"></script>
// 而後在按順序執行下面的代碼
<script>
    console.log(1);
</script>

預編譯

當js引擎解析的時候，它會在預編譯對全部聲明的變量和函數進行處理。segmentfault

變量提高瀏覽器

Javascriptconsole.log(a); // undefined
var a = 1;
console.log(a); // 1

預解析函數安全

JavaScriptf(); // 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也準備好處理下一個代碼塊。code

有個小坑，因爲js是按塊執行的，所以在一個js塊中調用後面塊聲明的變量或者函數就會提示語法錯誤。可是不一樣塊都屬於一個全局做用域，也就是說，塊之間的變量和函數是能夠共享的。（下面一個栗子）htm

<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執行的限制。