1 JavaScript執(zhí)行過程

2.1 JavaScript引擎運(yùn)行機(jī)制

?在前面幾章中，已經(jīng)初次渲染完瀏覽器的頁(yè)面监透，接下來主要分析JS引擎的一些運(yùn)行機(jī)制桶错。

2.1.1 事件循環(huán)、任務(wù)隊(duì)列

?事件循環(huán)與任務(wù)隊(duì)列是JS中比較重要的兩個(gè)概念胀蛮，這兩個(gè)概念在ES5和ES6兩個(gè)標(biāo)準(zhǔn)中有不同的實(shí)現(xiàn)院刁。

?ES5：
?事件循環(huán)：
?① 所有同步任務(wù)都在主線程（JS引擎）上執(zhí)行，形成一個(gè)執(zhí)行棧（函數(shù)調(diào)用棧）（execution context stack）粪狼；
?② 主線程之外退腥，還存在一個(gè)"任務(wù)隊(duì)列"（task queue）。只要異步任務(wù)滿足了條件鸳玩， 有了運(yùn)行結(jié)果，就在"任務(wù)隊(duì)列"之中放置一個(gè)事件演闭；
?③ 一旦"執(zhí)行棧"中的所有同步任務(wù)執(zhí)行完畢不跟，系統(tǒng)就會(huì)讀取"任務(wù)隊(duì)列"，看看里面有哪些事件米碰。那些對(duì)應(yīng)的異步任務(wù)窝革，于是結(jié)束等待狀態(tài)，進(jìn)入執(zhí)行棧吕座，開始執(zhí)行虐译；
?④ 主線程不斷重復(fù)上面的第三步，這個(gè)過程也稱為 Event Loop（事件循環(huán)）吴趴。

?ES6：
?在ES3和更早的版本中漆诽，JavaScript本身還沒有異步執(zhí)行代碼的能力，這也就意味著锣枝，宿主環(huán)境（瀏覽器/node）傳遞給JavaScript引擎一段代碼厢拭，引擎就把代碼直接順次執(zhí)行了，這個(gè)任務(wù)也就是宿主發(fā)起的任務(wù)撇叁，但是在ES5之后供鸠，JavaScript引入了Promise，這樣陨闹，不需要瀏覽器/node的安排楞捂，JavaScript引擎本身也可以發(fā)起任務(wù)了薄坏；
?我們將宿主發(fā)起的任務(wù)稱為宏觀任務(wù)（macrotask），把JavaScript引擎發(fā)起的任務(wù)稱為微觀任務(wù)（microtask）寨闹；
?宏觀任務(wù)：（主代碼塊胶坠，setTimeout()，setInterval()等）
?① 可以理解為每次執(zhí)行棧執(zhí)行的事件就是一個(gè)宏觀任務(wù)（包括每次從事件隊(duì)列中獲取一個(gè)事件回調(diào)并放到執(zhí)行棧中執(zhí)行）
?② 每一個(gè)宏觀任務(wù)都會(huì)從頭到尾將本身的事件執(zhí)行完畢鼻忠，不會(huì)執(zhí)行其它涵但，在執(zhí)行期間產(chǎn)生的微觀任務(wù)會(huì)被保存到微觀任務(wù)隊(duì)列。
?③ 在HTML規(guī)范：event-loop-processing-model里敘述了一次事件循環(huán)的處理過程帖蔓，JS引擎在處理了macroTask和microTask之后矮瘟，會(huì)進(jìn)行一次Update the rendering，其中細(xì)節(jié)比較多塑娇，總的來說會(huì)進(jìn)行一次UI的重新渲染澈侠，在setTimeout()這些異步任務(wù)之前。

?微觀任務(wù)：（Promise()埋酬，process.nextTick()等）
?① 可以理解為在當(dāng)前宏觀任務(wù)執(zhí)行結(jié)束后立即執(zhí)行的任務(wù)哨啃，在下一次Event Loop（包括主線程讀取"任務(wù)隊(duì)列"）之前，所以它的響應(yīng)速度是要比異步任務(wù)更快的写妥；

?事件循環(huán)： ★
?① 執(zhí)行一個(gè)宏任務(wù)（棧中沒有就從任務(wù)隊(duì)列中獲热颉）；
?② 執(zhí)行過程中如果遇到微任務(wù)珍特，就將它添加到微任務(wù)的任務(wù)隊(duì)列中祝峻；
?③ 宏任務(wù)執(zhí)行完畢后，立即執(zhí)行當(dāng)前微任務(wù)隊(duì)列中的所有微任務(wù)（依次執(zhí)行）扎筒；
?④ 當(dāng)前宏任務(wù)與微任務(wù)執(zhí)行完畢莱找，開始檢查渲染，然后GUI線程接管渲染嗜桌；
?④ 渲染完畢后奥溺，JS引擎線程繼續(xù)接管，開始下一個(gè)宏任務(wù)（從任務(wù)隊(duì)列中獲裙浅琛）浮定。

?例子：

var r = new Promise(function(resolve, reject) {
    console.log("a");
    resolve();
});
setTimeout(() => console.log("d"), 0);
setTimeout(function() {
    console.log("e");
}, 0);
r.then(() => console.log("c"));
console.log("b");

?Promise()里面的函數(shù)和console.log("b");直接執(zhí)行，兩個(gè)setTimeout()會(huì)加入任務(wù)隊(duì)列层亿，而Promise.then()回調(diào)是一個(gè)異步的執(zhí)行過程壶唤，是微觀任務(wù)，會(huì)在Promise()里面的函數(shù)和console.log("b");之后執(zhí)行棕所，所以整個(gè)代碼塊運(yùn)行結(jié)果為abcde闸盔。

?Promiss：
?Promise()是JavaScript語言提供的一種標(biāo)準(zhǔn)化的異步管理方式：

function sleep(duration) {
    return new Promise(function(resolve, reject) {
        console.log("b");
        setTimeout(resolve(), duration);
    })
}
console.log("a");
sleep(5000).then(() => console.log("c"));

?整個(gè)代碼塊運(yùn)行結(jié)果為abc，resolve()對(duì)應(yīng)Promise.then()回調(diào)琳省。

2.1.2 異步任務(wù)

?對(duì)于異步任務(wù)的學(xué)習(xí)迎吵，推薦《深入掌握 ECMAScript 6 異步編程》

?開發(fā)中常見的異步操作有：
?① 網(wǎng)絡(luò)請(qǐng)求躲撰，如 ajax，request击费；
?② IO 操作拢蛋，如 fs.readFile，DB的CRUD蔫巩；
?③ 定時(shí)函數(shù)谆棱，如 setTimeout，setInterval圆仔；
?④ 事件監(jiān)聽垃瞧。

?回調(diào)函數(shù)：函數(shù)中的參數(shù)如果是另一個(gè)函數(shù)的話，那么這個(gè)作為參數(shù)的函數(shù)就是回調(diào)函數(shù)

function a(callback) { //4坪郭、找到函數(shù)a()个从，執(zhí)行。     //11歪沃、第二次執(zhí)行函數(shù)a()嗦锐。
    console.log("我是parent函數(shù)a！"); //5沪曙、輸出奕污。                 //12、輸出。
    console.log("調(diào)用回調(diào)函數(shù)"); //6、輸出猛遍。                 //13、輸出腻窒。
    callback(); //7昵宇、執(zhí)行傳遞過來的函數(shù)b()磅崭。  //14、執(zhí)行傳遞過來的函數(shù)c()瓦哎。
}

function b() { //8砸喻、找到函數(shù)b()
    console.log("我是回調(diào)函數(shù)b"); //9、輸出蒋譬，完成函數(shù)a()回調(diào)函數(shù)b()的執(zhí)行割岛。
}

function c() { //15、找到函數(shù)c()犯助。
    console.log("我是回調(diào)函數(shù)c"); //16癣漆、輸出。
}

function test() { //2剂买、找到函數(shù)test()惠爽，執(zhí)行函數(shù)癌蓖。
    a(b); //3、執(zhí)行函數(shù)a(b)婚肆。
    a(c); //10租副、執(zhí)行函數(shù)a(c)。
}
test(); //1较性、執(zhí)行函數(shù)test()用僧。

?Generator 函數(shù)：該函數(shù)可以暫停執(zhí)行，而且函數(shù)體內(nèi)外可以數(shù)據(jù)交換赞咙，還可以使用try ... catch來處理錯(cuò)誤

var fetch = require('node-fetch');

function* gen() {
    var url = 'https://api.github.com/users/github';
    var result = yield fetch(url);
    console.log(result.bio);
}

var g = gen();
var result = g.next();

result.value.then(function(data) {
    return data.json();
}).then(function(data) {
    g.next(data);
});

?co 函數(shù)：Generator 函數(shù)只要傳入 co 函數(shù)责循，就會(huì)自動(dòng)執(zhí)行，不需要寫.next()人弓，co 函數(shù)還可以返回一個(gè) Promise 對(duì)象沼死，因此可以用 then 方法添加回調(diào)函數(shù)

var fs = require('fs');

var readFile = function(fileName) {
    return new Promise(function(resolve, reject) {
        fs.readFile(fileName, function(error, data) {
            if (error) reject(error);
            resolve(data);
        });
    });
};

var gen = function*() {
    var f1 = yield readFile('/etc/fstab');
    var f2 = yield readFile('/etc/shells');
    console.log(f1.toString());
    console.log(f2.toString());
};
var co = require('co');
co(gen).then(function() {
    console.log('Generator 函數(shù)執(zhí)行完成');
});

?async 函數(shù)：把上面的例子寫成 async 函數(shù)，其實(shí)async 函數(shù)就是將 Generator 函數(shù)的星號(hào)替換成 async崔赌，將 yield 替換成 await意蛀，僅此而已

var fs = require('fs');

var readFile = function(fileName) {
    return new Promise(function(resolve, reject) {
        fs.readFile(fileName, function(error, data) {
            if (error) reject(error);
            resolve(data);
        });
    });
};
var asyncReadFile = async function() {
    var f1 = await readFile('/etc/fstab');
    var f2 = await readFile('/etc/shells');
    console.log(f1.toString());
    console.log(f2.toString());
    console.log('async 函數(shù)執(zhí)行完成');
};
asyncReadFile();

?使用async 函數(shù)實(shí)現(xiàn)紅綠燈：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>紅綠燈</title>
        <style>
            #traffic-light {
                margin:0 auto
                height: 50px;
                width: 50px;
                background: green;
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        <div id="traffic-light"></div>
        <script>
            function sleep(duration) {
                return new Promise(function(resolve) {
                    setTimeout(resolve, duration);
                })
            }
            async function changeColor(duration, color) {
                document.getElementById("traffic-light").style.background = color;
                await sleep(duration);
            }
            async function main() {
                while (true) {
                    await changeColor(3000, "green");
                    await changeColor(1000, "yellow");
                    await changeColor(2000, "red");
                }
            }
            main()
            </script>
    </body>
</html>

?自此，事件循環(huán)和宏微任務(wù)部分結(jié)束健芭。

2.1.3 函數(shù)的執(zhí)行過程

?函數(shù)是更細(xì)的執(zhí)行粒度县钥，一段代碼塊可能包含多個(gè)函數(shù)；

var local = 1
function bar() {
    console.log(local);
}

?在JS中，函數(shù)等同于閉包痒留，閉包是 JS 函數(shù)作用域的副產(chǎn)品谴麦。換句話說，正是由于 JS 的函數(shù)內(nèi)部可以使用函數(shù)外部的變量伸头，所以上面的代碼正好符合了閉包的定義匾效。
?閉包是一個(gè)模式，不單單是用來訪問私有變量的恤磷。

2.1.3.1 執(zhí)行上下文

?JavaScript標(biāo)準(zhǔn)把一段代碼（包括函數(shù)）面哼，執(zhí)行所需的所有信息定義為：“執(zhí)行上下文”：
?執(zhí)行上下文在ES3中，包含三個(gè)部分：
?① scope：作用域扫步，也常常被叫做作用域鏈魔策；
?② variable object：變量對(duì)象，用于存儲(chǔ)變量的對(duì)象河胎；
?③ this value：this值闯袒。

?在ES5中，我們改進(jìn)了命名方式，把執(zhí)行上下文最初的三個(gè)部分改為下面這個(gè)樣子：
?① lexical environment：詞法環(huán)境政敢，當(dāng)獲取變量時(shí)使用原茅；
?② variable environment：變量環(huán)境，當(dāng)聲明變量時(shí)使用堕仔；
?③ this value：this值擂橘。

?在ES2018中，執(zhí)行上下文又變成了這個(gè)樣子摩骨，this值被歸入lexical environment通贞，但是增加了不少內(nèi)容：
?① lexical environment：詞法環(huán)境，當(dāng)獲取變量或者this值時(shí)使用恼五；
?② variable environment：變量環(huán)境昌罩，當(dāng)聲明變量時(shí)使用；
?③ code evaluation state：用于恢復(fù)代碼執(zhí)行位置灾馒；
?④ Function：執(zhí)行的任務(wù)是函數(shù)時(shí)使用茎用，表示正在被執(zhí)行的函數(shù)；
?⑤ ScriptOrModule：執(zhí)行的任務(wù)是腳本或者模塊時(shí)使用睬罗，表示正在被執(zhí)行的代碼轨功；
?⑥ Realm：使用的基礎(chǔ)庫(kù)和內(nèi)置對(duì)象實(shí)例；
?⑦ Generator：僅生成器上下文有這個(gè)屬性容达，表示當(dāng)前生成器古涧。

2.1.3.2 函數(shù)里不帶var/let/const的變量

2.1.3.3 函數(shù)（函數(shù)體）

2.1.4 函數(shù)中語句的執(zhí)行過程

?