js单线程--事件执行顺序，宏任务与微任务

1，js的代码执行顺序

js引擎执行js代码的时候是单线程的，同一时刻只会有一个进程执行JS代码，多任务需要排队等候。

JavaScript的单线程，与它的用途有关，作为浏览器脚本语言，JavaScript的主要用途是与用户交互，以及操作DOM。这决定了它只能是单线程，否则会带来很多复杂的同步问题。这种模式可能会阻塞代码，导致代码执行效率低下。

为了避免这个问题，出现了异步编程，通过回调函数来实现异步代码的存放与执行。将所有的任务分为两种，一种是同步任务，一种是异步任务。

1. 同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行下一个任务。
2. 异步任务：不进入主线程，而进入“任务队列”的任务，自由“任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

2，为什么会有异步

如果代码只能自上而下执行，如果上一行解析时间很长，那么下面的代码就会被阻塞。用户就会想"这么卡，算了不用了"，这样就导致了很差的用户体验。而使用异步编程就会将任务添加到任务队列中，优先执行同步代码，将回调函数或者比较难加载的放到队列中，就会节省很多时间。

3，任务队列的执行顺序

由于异步函数中还有微任务与宏任务，

宏任务：整体代码script、setTimeOut、setInterval、交互事件
微任务：promise.then、process.nextTick(node)、MutaionObserver

先微任务microtask队列，再宏任务macrotask队列 。
调用Promise 中的resolve，reject属于微任务队列，setTimeout属于宏任务队列 ，所以：同步=>异步：微任务=>宏任务

例如：

console.log('event start')
setTimeout(function () {
     
    console.log('setTimeout');
});
 
new Promise(function(resolve,reject){
     
    console.log('promise start')
    resolve()
}).then(function(){
     
    console.log('promise end')
})
console.log('event end')

//执行结果：
event start
promise start
event end
promise end
undefined
setTimeout

注意：new Promise是会进入到主线程中立刻执行，而promise.then则属于微任务。

4，简单练习：

下面是一些例子：

//先来个简单的：
console.log(1)
setTimeout(function(){
     
	console.log(2)
},0)
console.log(3)

打印结果为：
1 3 2

//关于异步的：
setTimeout(()=>{
     
  console.log('setTimeout1')
},0)
let p = new Promise((resolve,reject)=>{
     
  console.log('Promise1')
  resolve()
})
p.then(()=>{
     
  console.log('Promise2')    
})

打印结果为：
Promise1  Promise2  setTimeout1

//简单练习：
console.log("start")
Promise.resolve().then(()=>{
     
	setTimeout(()=>{
     
    	console.log(1)
    },0)

    onsole.log(2)
    }).then(()=>{
     
        console.log(3)
    })
console.log(4)
setTimeout(()=>{
     
	console.log(5)
},0)

// process.nextTick(()=>{
     
//     console.log(6)
// })
console.log("end")

//执行顺序为：
start  4  end  2  3  5  1

以上就是我的个人理解了，大家再见啦。