推广

大白话讲解JavaScript 执行机制，一看就懂

iseeyu2年前 (2024-02-21)推广133

运行机制.png

我们解释一下这张图：

1、同步和异步任务分别进入不同的执行”场所”，同步的进入主线程，异步的进入Event Table并注册函数。
2、当指定的事情完成时，Event Table会将这个函数移入Event Queue。
3、主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。
上述过程会不断重复，也就是常说的Event Loop(事件循环)。（Event Loop是javascript的执行机制）

优先级
setTimeout()、setInterval()
setTimeout() 和 setInterval() 产生的任务是异步任务，也属于宏任务。
setTimeout() 接受两个参数，第一个是回调函数，第二个是推迟执行的毫秒数。
如果将第二个参数设置为0或者不设置，意思并不是立即执行，而是指定某个任务在主线程最早可得的空闲时间执行，也就是说，尽可能早得执行。它在”任务队列”的尾部添加一个事件，因此要等到同步任务和”任务队列”现有的事件都处理完，才会得到执行。（画重点）
所以说，setTimeout() 和 setInterval() 第二个参数设置的时间并不是绝对的，它需要根据当前代码最终执行的时间来确定的

Promise
Promise 相对来说就比较特殊了，在 new Promise() 中传入的回调函数是会 立即执行 的，但是它的 then() 方法是在 执行栈之后，任务队列之前 执行的，它属于微任务。

大白话讲解JavaScript 执行机制，一看就懂

process.nextTick
process.nextTick 是 Node.js 提供的一个与”任务队列”有关的方法，它产生的任务是放在执行栈的尾部，并不属于宏任务和微任务，因此它的任务总是发生在所有异步任务之前。

setImmediate
setImmediate 是 Node.js 提供的另一个与”任务队列”有关的方法，它产生的任务追加到”任务队列”的尾部，它和 setTimeout(fn, 0) 很像，但优先级都是 setTimeout 优先于 setImmediate。
有时候，setTimeout 的执行顺序会在 setImmediate 的前面，有时候会在 setImmediate 的后面，这并不是 node.js 的 bug，这是因为虽然 setTimeout 第二个参数设置为0或者不设置，但是 setTimeout 源码中，会指定一个具体的毫秒数（node为1ms，浏览器为4ms），而由于当前代码执行时间受到执行环境的影响，执行时间有所起伏，如果当前执行的代码小于这个指定的值时，setTimeout 还没到推迟执行的时间，自然就先执行 setImmediate 了，如果当前执行的代码超过这个指定的值时，setTimeout 就会先于 setImmediate 执行。

通过上面的介绍，我们就可以得出一个代码执行的优先级:
同步代码（宏任务） > process.nextTick > Promise（微任务）> setTimeout(fn)、setInterval(fn)（宏任务）> setImmediate（宏任务）> setTimeout(fn, time)、setInterval(fn, time)，其中time>0

面试回答
面试中该如何回答呢？下面是我个人推荐的回答：
首先js 是单线程运行的，在代码执行的时候，通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行。
在执行同步代码的时候，如果遇到了异步事件，js 引擎并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务
当同步事件执行完毕后，再将异步事件对应的回调加入到与当前执行栈中不同的另一个任务队列中等待执行。
任务队列可以分为宏任务对列和微任务对列，当当前执行栈中的事件执行完毕后，js 引擎首先会判断微任务对列中是否有任务可以执行，如果有就将微任务队首的事件压入栈中执行。
当微任务对列中的任务都执行完成后再去判断宏任务对列中的任务。

面试遇到的问题总结
1、同步和异步的区别是什么？分别举一个同步和异步的例子
同步会阻塞代码执行，而异步不会。alert是同步，setTimeout是异步

2、为何需要异步呢？
如果第一个示例中间步骤是一个 ajax 请求，现在网络比较慢，请求需要5秒钟。如果是同步，这5秒钟页面就卡死在这里啥也干不了了。

最后，前端 JS 脚本用到异步的场景主要有两个：