摘要：引言學(xué)習(xí)的時(shí)候，經(jīng)常聽人說，即是異步的，又是單線程的。所以我們說是異步單線程的。參考從瀏覽器多進(jìn)程到單線程，運(yùn)行機(jī)制最全面的一次梳理運(yùn)行機(jī)制詳解再談異步機(jī)制詳解運(yùn)行原理解析并發(fā)模型與事件循環(huán)

學(xué)習(xí)javascipt的時(shí)候，經(jīng)常聽人說，javascipt即是異步的，又是單線程的。究竟什么是異步,什么是單線程？javascript在瀏覽器中的運(yùn)行機(jī)制是怎么樣的？什么是eventloop,task queue?怎么寫異步函數(shù)？相信讀完這篇文章，相信你會對上面問題有一個(gè)全面的認(rèn)識。

Browser進(jìn)程：瀏覽器的主進(jìn)程（負(fù)責(zé)協(xié)調(diào)、主控），只有一個(gè)。

第三方插件進(jìn)程：每種類型的插件對應(yīng)一個(gè)進(jìn)程，僅當(dāng)使用該插件時(shí)才創(chuàng)建

GPU進(jìn)程：最多一個(gè)，用于3D繪制等

瀏覽器渲染進(jìn)程（瀏覽器內(nèi)核）（Renderer進(jìn)程，內(nèi)部是多線程的）

渲染引擎線程：顧名思義，該線程負(fù)責(zé)頁面的渲染

JS引擎線程：負(fù)責(zé)JS的解析和執(zhí)行(主線程)

定時(shí)觸發(fā)器線程：處理定時(shí)事件，比如setTimeout, setInterval

事件觸發(fā)線程：處理DOM事件

異步http請求線程：處理http請求

雖然JavaScript是單線程的(說的是JS引擎線程)，可是瀏覽器內(nèi)部不是單線程的。一些I/O操作、定時(shí)器的計(jì)時(shí)和事件監(jiān)聽（click, keydown...）等都是由瀏覽器提供的其他線程來完成的。
主線程和渲染引擎線程互斥，因?yàn)殇秩镜臅r(shí)候主線程可能通過dom操作渲染結(jié)果，所以主線程必須被阻塞

之前傻傻的分不清楚單線程多線程，同步異步。其實(shí)很簡單

異步的判斷標(biāo)準(zhǔn)：是否阻塞，同步阻塞，異步不阻塞。

單線程的判斷標(biāo)準(zhǔn)：一次是否只做一件事。

JS引擎一次只做一件事。遇到異步任務(wù)并不會阻塞后面的同步任務(wù)（不等待）。所以我們說JS是異步 單線程的。需要注意的是JS引擎其實(shí)并不提供異步的支持，異步支持主要依賴于運(yùn)行環(huán)境(瀏覽器或Node.js)。

var start = new Date();
    while(new Date() - start < 100000) { // delay 10 sec
        ;
    }

上面代碼在chrome控制臺輸入可以手動阻塞當(dāng)前頁面的js主線程10s。然后我們在當(dāng)前頁面輸入console.log(1),當(dāng)前頁面無反應(yīng)，在另外的頁面輸入console.log(1)直接打印
說明瀏覽器每個(gè)頁面都會多帶帶起一個(gè)進(jìn)程，頁面1的主線程被阻塞并不會影響影響頁面2的主線程

之前在Stackoverflow看了一個(gè)答案，感覺還比較靠譜

JavaScript Engine：parse your code and convert it to runnable commands
JavaScript Runtime Environment ：provide some objects to javascript so that it can interact with the outside world.
For example, the Chrome Browser and node.js use the same Engine - V8, but their Runtimes are different: in Chrome you have the window, DOM objects etc, while node gives you require, Buffers and processes.

通俗的講，上面這張圖，左邊你可以看成JS引擎，右邊你可以看成JS運(yùn)行環(huán)境

之前已經(jīng)說了，JS在設(shè)計(jì)之初選擇單線程，是以為單線程簡單，可控。

但是單線程存在一個(gè)問題，部分任務(wù)比如Ajax請求數(shù)據(jù)，如果設(shè)計(jì)成同步的，后面的任務(wù)將都去等待Ajax請求完，這個(gè)性能是不能接受的。

所以瀏覽器內(nèi)核（?個(gè)人推測，暫時(shí)沒有找到相關(guān)資料）將任務(wù)分為同步任務(wù)和異步任務(wù)，所有同步任務(wù)放到主線程上執(zhí)行，形成一個(gè)執(zhí)行棧（execution context stack）。所以異步任務(wù)放到其他異步線程上去執(zhí)行。

當(dāng)異步任務(wù)執(zhí)行完以后，相關(guān)回調(diào)函數(shù)會放入到消息隊(duì)列(也有叫callback queue、task queue)中。

主線程同步任務(wù)執(zhí)行完，每個(gè)一段事件會檢查消息隊(duì)列一次，有回調(diào)函數(shù)就會執(zhí)行，如此往復(fù)就成為Eventloop

個(gè)人的理解 :JS引擎是同步的，瀏覽器通過eventloop這種機(jī)制實(shí)現(xiàn)了異步

看一下How JavaScript works 怎么描述這個(gè)過程的

So, for example, when your JavaScript program makes an Ajax request to fetch some data from the server, you set up the “response” code in a function (the “callback”), and the JS Engine tells the hosting environment:
“Hey, I’m going to suspend execution for now, but whenever you finish with that network request, and you have some data, please call this function back.”
The browser is then set up to listen for the response from the network, and when it has something to return to you, it will schedule the callback function to be executed by inserting it into the event loop.

面試喜歡考宏任務(wù)（macrotask），微任務(wù)（microtask）。那么我們就來講一講macrotask和microtask是個(gè)啥子

宏任務(wù)又成為task。可以理解是每次執(zhí)行棧執(zhí)行的代碼就是一個(gè)task，task1->渲染->task1

microtask，可以理解是在當(dāng)前 task 執(zhí)行結(jié)束后立即執(zhí)行的任務(wù)，所以microtask有歸屬性,只在對應(yīng)的task執(zhí)行完后立即執(zhí)行.task1->microtask1->渲染->task2->microtask2->渲染...

macrotask：主代碼塊，setTimeout，setInterval等（可以看到，事件隊(duì)列中的每一個(gè)事件都是一個(gè)macrotask）
microtask：Promise，process.nextTick等

求下面代碼的結(jié)果

console.log("1");
setTimeout(function() { //回調(diào)2
    new Promise(function(resolve) {
        console.log("2");
        resolve();
    }).then(function() {
        console.log("3")
    })
    console.log("4");
},2000)
new Promise(function(resolve) {
    console.log("5");
    resolve();
}).then(function() {
    console.log("6")
})

setTimeout(function() {  //回調(diào)1
    new Promise(function(resolve) {
        console.log("7");
        resolve();
    }).then(function() {
        console.log("8")
    })
      setTimeout(function(){ //回調(diào)3
        console.log("9")
    },2000)
},1000)

//(156) (78) (243) (9)

解析：
task1: 輸出1 5 ----> microtask1 輸出6 --（執(zhí)行?？眨?->render---->eventloop
1秒以后 callback queue里面加入回調(diào)1 被eventloop捕獲，同步任務(wù)入棧，異步任務(wù)給settiomeout線程（也就是回調(diào)3的那個(gè)異步任務(wù)）
task2: 輸出7 ----> microtask2 輸出8 --（執(zhí)行?？眨?->render---->eventloop
2秒以后 callback queue里面加入回調(diào)2 被eventloop捕獲，同步任務(wù)入棧
task3: 輸出2 4 ----> microtask3 輸出3 --（執(zhí)行?？眨?->render---->eventloop
3秒以后 callback queue里面加入回調(diào)3 被eventloop捕獲，同步任務(wù)入棧
task4: 輸出9 --（執(zhí)行棧空）-->render---->eventloop...

let fs = require("fs");
fs.readFile("./1.js","utf-8",(err,data)=>{
    //
    fs.readFile("./2.js","utf-8",(err,data)=>{
         //
         fs.readFile("./3.js","utf-8",(err,data)=>{
                //
         })
    })
})

缺點(diǎn)是容易形成回調(diào)地獄，不能return

const fs = require("fs");
const readFile(i) = new Promise(function(){
     fs.readFile(`./${i}.js`,"utf-8",(err,data)=>{
            resolve(data)
         })
})
    readFile(1)
   .then(readFile(2))
   .then(readFile(3))
   .....

async function read(){
 //await后面必須跟一個(gè)promise,
 let a = await readFile("./1.txt");
 console.log(a);
 let b = await readFile("./2.txt");
 console.log(b);
 let c = await readFile("./3.txt");
 console.log(c);
 return "end";
 }

以上是我看了多篇文章以后，結(jié)合自己的理解，對javascript異步單線程，以及運(yùn)行機(jī)制做的一個(gè)總結(jié)。如果你感覺哪一部分有點(diǎn)問題，歡迎在評論區(qū)留言。

從瀏覽器多進(jìn)程到JS單線程，JS運(yùn)行機(jī)制最全面的一次梳理
JavaScript 運(yùn)行機(jī)制詳解：再談Event Loop
JavaScript異步機(jī)制詳解
JavaScript 運(yùn)行原理解析
What is the difference between JavaScript Engine and JavaScript Runtime Environment
并發(fā)模型與事件循環(huán)