JavaScript执行机制

[For-me]

众所周知，JavaScript是一个单线程的语言；所谓单线程，也就是同一时间，只能做一件事情，单线程限制了JavaScript，同时也形成了JavaScript独特的风格。新H5规范中，为了更好的利用cpu，提出了利用Web Worker 去实现多线程，但是子线程还是受主线程控制，且不能操作DOM，所以这还是没有改变JavaScript语言的本质。

任务队列

因为JavaScript的单线程，所有任务都需要排队，前一个任务结束再执行后一个，如果这些任务中有需要时间比较长的任务，线程就会一直被挂起，阻塞后面任务的执行，可能就会出现页面的假死，相应缓慢等问题；所以JavaScript的设计者将任务分成了两种：同步任务，异步任务 ；同步任务就是在主线程上顺序执行的任务，异步任务就是不进入主线程，进入任务队列中的任务，只有任务队列通知主进程某个异步任务可以执行了，这个异步任务才会被加入到主进程中执行；

具体异步执行过程如下：

• 所有同步任务都在主线程中顺序执行，形成一个执行栈；
• 同步任务进入主进程执行，异步任务推入Event Table中；
• 主线程之外还存在一个任务队列，当某个异步任务执行完毕，就会在任务队列上挂载一个钩子，并且推入到Eevent Queue 中等待主进程执行；
• 主进程中所有同步任务执行完毕后，就会询问这个任务队列的Event Queue中是否有可执行的异步任务，若有，则放入主进程中执行；
• 主进程不断重复上面三个步骤。

这就是JavaScript的执行机制，会不断重复执行

事件和回调函数

任务队列其实是一个事件队列，遵循先进先出原则，所有异步任务执行完毕都会注册回调到任务队列中，主进程其实就是执行这些注册的回调函数，所有可以认为只要是有回调函数的方法或者事件都是异步任务，但是其实进入主进程中的顺序还和定时器有关系，某些异步任务需要满足一定的条件(定时器)才能返回到任务队列中。

Event Loop

除了前面说到的任务队列的执行顺序，JavaScript内部把任务分为：

• 宏任务(macro-task)：script，setTimeout，setInterval
• 微任务(micro-task)：Promise， Process.nextTIck，setTimeOut（node中）

其执行顺序是先执行宏任务，当执行过程中遇到微任务，就推入到微任务事件队列，当宏任务执行完毕后，会查看微任务的事件队列，并将微任务的事件执行完毕；再重复

console.log('1');

setTimeout(function cb(){
    console.log('time 1');
})

console.log('2');
setTimeout(function cb1(){
    console.log('time 2')
}, 0 );

console.log('3')

该代码片段首先进入主线程，执行同步任务console，setTimeout是微任务并且是异步任务，被推入Event Table，然后注册两个定时器函数的回调，然后推入Event Queue，当主线程中同步任务执行完毕，就再来微任务(Event Queue)中查找，然后顺序执行满足条件的任务；

所以要结合任务队列和Eevent Loop以及事件，回调函数才能理解到JavaScript中函数的执行顺序以及其中发生了什么