JavaScript执行过程，同步任务与异步任务（宏任务、微任务）

JavaScript执行过程

1. JavaScript是单线程执行

task1->task2->task3->task4
如果task1耗时较长，task2,3,4则会处于等待状态，造成程序假死

2. 同步任务和异步任务

1. 同步任务（synchronous）
   • 又叫做非耗时任务，指的是在主线程上排队执行的那些任务
   • 只有一个前台任务执行完毕，才能执行后一个任务
2. 异步任务（asynchronous）
   • 又叫做耗时任务，异步任务有JavaScript委托给宿主（浏览器或者node.js）环境进行执行
   • 当异步任务执行完成后，会通知JavaScript主线程执行异步任务的回调函数

3. EventLoop的基本概念

JavaScript主线程从“任务队列”中读取异步任务的回调函数，放到执行栈中依次执行。
这个过程是循环不断的，所以整个的这种运行机制又称为EventLoop（事件循环）。

import fs from 'then-fs'

// 下列示例中输出顺序为A D C B
// console.log('A')同步执行
// fs.readFile为异步任务放到宿主机线程中完成读取文件后执行
// setTimeout为异步任务放到宿主机线程中立马执行
// console.log('D')同步执行

console.log('A')

fs.readFile('./resource/f2.txt', 'utf8').then(r1 => {
    console.log('B')
})

setTimeout(() => {
    console.log('C')
},0)

console.log('D')

4. 宏任务与微任务

JavaScript把异步任务又做了进一步的划分，异步任务又分为两类，分别是：

1. 宏任务（macrotask）
   ① 异步Ajax请求
   ② setTimeout（延时器）、setInterval（定时器）
   ③ 文件操作
   ④ 其他宏任务

2. 微任务（microtask）
   ① Promise.then、.catch和.finally
   ② process.nextTick
   ③ 其他微任务

3. 宏任务与微任务的执行顺序
   每一个宏任务执行完毕，都会去查询系统是否有待执行的微任务，有的话先执行完所有的微任务，
   然后执行下一个宏任务，否则的话直接执行下一个宏任务

// 下列示例的执行顺序： 2431
// 先执行同步任务，然后执行微任务，然后执行宏任务

setTimeout(function(){
    console.log(1)// 宏任务
})

new Promise(function(resolve){
    console.log(2)// 同步任务
    resolve()
}).then(function(){
    console.log(3)// 微任务
})

console.log(4)// 同步任务