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
并发模型与事件循环