JavaScript基础之事件循环

最近有在系统的复习JavaScript基础，在看了一些文章之后，于是写一些自己的学习理解。以下涉及的一些基础概念。图例的callback stack应为 call stack 画的时候写错了（ps:真懒得上传图片了...）...

同步任务、异步任务

Js异步任务：不会等待这个任务结束才开始执行下一个任务，开启过后立即往后执行下一个任务

一、JavaScript异步模式图例

二、执行步骤

1. step0 加载整体代码，压栈匿名全局调用；
2. step1 将console.log()入栈，非Web apis直接执行 global start，执行并出栈 ；
3. step2 将setTimeout(timer1) 入栈,进入 Web apis环境出栈，不受js线程影响；
4. step3 将setTimeout(timer2) 入栈,进入 Web apis环境排队，出栈call stack；
5. step4 将console.log()入栈，非Web apis直接执行 global end，并出栈 ；
6. step5 调用栈执行完毕，匿名调用被清空， event loop监听调用栈和消息队列，并将消息队列的回调压栈；如果遇到回调里还有异步操作同样.
   道理还是执行上述的事件循环；直到调用栈和消息队列都没有需要执行的任务为止

三、总结：

• js执行栈会按进栈顺序执行同步任务，将异步任务推进Web api环境，当同步任务执行完毕时，事件循环机制就会读取消息队列的异步回调，直到执行完毕为止。

宏任务、微任务

经过上面的梳理，我们知道了JS作为单线程语言是如何处理异步任务的。这儿就引伸到宏任务、微任务上来了。首先我们需要知道JS引擎线程和GUI渲染线程是互斥的。执行顺序是：宏任务=>微任务=>GUI渲染。浏览器为了使宏任务和DOM任务有序进行，会在一个宏任务执行结果后，在下一个宏任务执行前，GUI渲染线程开始工作，对页面进行渲染。

赞(1) 打赏

支付宝扫一扫打赏

微信扫一扫打赏