JS核心知识点梳理异步单线程运行机制

引言

学习 javascipt 的时候，经常听人说，javascipt 即是异步的，又是单线程的。究竟什么是异步, 什么是单线程？javascript 在浏览器中的运行机制是怎么样的？什么是 eventloop,task queue? 怎么写异步函数？相信读完这篇文章，相信你会对上面问题有一个全面的认识。

全面了解浏览器

浏览器有许多进程：

1. Browser 进程：浏览器的主进程（负责协调、主控），只有一个。
2. 第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建
3. GPU 进程：最多一个，用于 3D 绘制等
4. 浏览器渲染进程（浏览器内核）（Renderer 进程，内部是多线程的）

在浏览器渲染进程中有许多线程：

• 渲染引擎线程：顾名思义，该线程负责页面的渲染
• JS 引擎线程：负责 JS 的解析和执行 ( 主线程)
• 定时触发器线程：处理定时事件，比如 setTimeout, setInterval
• 事件触发线程：处理 DOM 事件
• 异步 http 请求线程：处理 http 请求

虽然 JavaScript 是单线程的 (说的是 JS 引擎线程)，可是浏览器内部不是单线程的。一些 I / O 操作、定时器的计时和事件监听（click, keydown...）等都是由浏览器提供的其他线程来完成的。
主线程和渲染引擎线程互斥，因为渲染的时候主线程可能通过 dom 操作渲染结果，所以主线程必须被阻塞

单线程, 异步

判断标准

之前傻傻的分不清楚单线程多线程，同步异步。其实很简单

异步的判断标准：是否阻塞，同步阻塞，异步不阻塞。

单线程的判断标准：一次是否只做一件事。

JS 引擎一次只做一件事。遇到异步任务并不会阻塞后面的同步任务（不等待）。所以我们说 JS 是异步 单线程的。需要注意的是JS 引擎其实并不提供异步的支持，异步支持主要依赖于运行环境(浏览器或 Node.js)。

while 阻塞实验

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

上面代码在 chrome 控制台输入可以手动阻塞当前页面的 js 主线程 10s。然后我们在当前页面输入 console.log(1), 当前页面无反应，在另外的页面输入 console.log(1)直接打印
说明 浏览器每个页面都会单独起一个进程，页面 1 的主线程被阻塞并不会影响影响页面 2 的主线程

执行机制

JS Engine 和 runtime Environment

之前在 Stackoverflow 看了一个答案，感觉还比较靠谱

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 运行环境

Eventloop

之前已经说了，JS 在设计之初选择单线程，是以为单线程简单，可控。

但是单线程存在一个问题，部分任务比如 Ajax 请求数据，如果设计成同步的，后面的任务将都去等待 Ajax 请求完，这个性能是不能接受的。

所以浏览器内核（? 个人推测，暂时没有找到相关资料）将任务分为同步任务和异步任务，所有同步任务放到主线程上执行，形成一个执行栈（execution context stack）。所以异步任务放到其他异步线程上去执行。

当异步任务执行完以后，相关回调函数会放入到消息队列 (也有叫 callback queue、task queue) 中。

主线程同步任务执行完，每个一段事件会检查消息队列一次，有回调函数就会执行，如此往复就成为 Eventloop

个人的理解 :JS 引擎是同步的，浏览器通过 eventloop 这种机制实现了异步

看一下 How JavaScript works 怎么描述这个过程的

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.

宏任务，微任务、练习

面试喜欢考宏任务（macrotask），微任务（microtask）。那么我们就来讲一讲 macrotask 和 microtask 是个啥子

宏任务又成为 task。可以理解是每次执行栈执行的代码就是一个 task，task1-> 渲染 ->task1

microtask，可以理解是在 当前 task 执行结束后立即执行的任务，所以 microtask 有归属性, 只在对应的 task 执行完后立即执行.task1->microtask1-> 渲染 ->task2->microtask2-> 渲染 …

macrotask：主代码块，setTimeout，setInterval 等（可以看到，事件队列中的每一个事件都是一个 macrotask）

microtask：Promise，process.nextTick 等

求下面代码的结果

console.log('1');
setTimeout(function() { // 回调 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() {  // 回调 1
    new Promise(function(resolve) {console.log('7');
        resolve();}).then(function() {console.log('8')
    })
      setTimeout(function(){ // 回调 3
        console.log('9')
    },2000)
},1000)

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

解析：
task1: 输出 1 5 —-> microtask1 输出 6 –（执行栈空）–>render—->eventloop
1 秒以后 callback queue 里面加入 回调 1 被 eventloop 捕获，同步任务入栈，异步任务给 settiomeout 线程（也就是回调 3 的那个异步任务）
task2: 输出 7 —-> microtask2 输出 8 –（执行栈空）–>render—->eventloop
2 秒以后 callback queue 里面加入 回调 2 被 eventloop 捕获，同步任务入栈
task3: 输出 2 4 —-> microtask3 输出 3 –（执行栈空）–>render—->eventloop
3 秒以后 callback queue 里面加入 回调 3 被 eventloop 捕获，同步任务入栈
task4: 输出 9 –（执行栈空）–>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)=>{//})
    })
})

缺点是容易形成回调地狱，不能 return

promise

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 await

async function read(){
 //await 后面必须跟一个 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';
 }

尾声

以上是我看了多篇文章以后，结合自己的理解，对 javascript 异步单线程，以及运行机制做的一个总结。如果你感觉哪一部分有点问题，欢迎在评论区留言。

参考

从浏览器多进程到 JS 单线程，JS 运行机制最全面的一次梳理
JavaScript 运行机制详解：再谈 Event Loop
JavaScript 异步机制详解
JavaScript 运行原理解析
What is the difference between JavaScript Engine and JavaScript Runtime Environment
并发模型与事件循环