说起任务队列的话,首先我们要回顾一下JS语言的特点。 我们知道,Javascript 这门脚本语言诞生的使命就是为处理页面中用户的交互,以及操作 DOM 而诞生的。
所以JS的设计就是单线程的,总不能多线程来操作DOM结构吧(那不就乱套了吗)。
那么什么是单线程,其实就是任务一个接着一个做,不能同时处理多个任务。 那这样就会导致一个问题,如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。
那JS是如何解决这个问题呢?我用一张图来说一下:
有一说一我这个图画的是真的好!
OK,现在我们来解释一下这个图。 也就是JS在处理任务的时候,可以分为同步任务和异步任务。只有当同步任务都执行完毕之后,才会到任务队列里面执行异步任务。 在任务队列中,也分为宏任务和微任务分别在宏任务队列和微任务队列,只有微任务队列中的任务全部执行完毕后,才会执行宏任务队列里面的任务。
OKK,只要记住这两条规则,我们就可以看一个例子了(也要记住我上面的那张图)。
console.log(1) setTimeout(function () { console.log(2); process.nextTick(function () { console.log(3); }) }) Promise.resolve().then(function() { console.log(4) }).then(function() { console.log(5) })我们来看一下这个代码的执行过程。 反正肯定不是输出12345。
从上到下: 第一遍 console.log(1)会放到主线程中, setTimeout会放到宏任务队列 Promise会放到微任务队列
主线程先执行,然后微任务: 打印1,4,5 再执行宏任务: console.log(2)放到主线程 process.nextTick放到微任务队列
主线程先执行,然后微任务 打印2,3
所以打印结果为: 1 4 5 2 3
OK,这样的话,关于JS的任务队列也就解释清楚了算。 END.