事件循环(EventLoop)
- 浏览器的事件循环—(不能说javascript的事件循环)
- 任务是以事件及其回调的方式存在的。当事件(点击、图片的成功加载)发生时,将其回调添加到任务列表;主线程上的任务完成后,就会从任务队列中取出来任务执行,此过程不断重复从而形成一个循环
- 自己理解:一段代码从上往下执行,js是单线程的,调用分为同步异步。js在浏览器宿主环境中执行,浏览器是多线程。那么一段代码在浏览器运行应该是先整个script 排队在任务队列里,然后浏览器主线程空闲时,任务1就会进入线程中开始运行,同步任务先依次从上往下执行输出,异步任务如定时器会由浏览器来进行调用,并将其回调推入任务队列进行排队,等主线程为空,也就是同步任务执行完,会进行下一个任务,才会执行比如定时器等异步任务。任务结束后再次调用下一个任务形成循环,也就是事件循环
- 名词:事件循环、主线程、任务队列
- 事件循环:注册监听事件、定时器、AJAX请求等,当其发生时,会将回调添加到任务队列中
- 主线程:浏览器是多线程的,主线程执行任务队列中的任务
- 任务:script、网络请求、定时器任务等都是一个个任务
- 任务队列:存放任务的队列,按照顺序依次添加并依次进入到主线程里执行。(有插队机制-宏微任务对列)
异步代码的执行过程
<script>
console.log(1)
setTimeout(()=>{
console.log(2)
}, 2000)
console.log(3)
</script>
- 浏览器任务队列中
<script>
整体放入任务队列进行排队,等主线程空闲,会开始执行<script>
- 同步任务会直接输出,控制台打印 1 3
- 异步任务定时器会由浏览器定时2秒将回调任务推入任务队列
- 等
<script>
的同步代码执行完毕后(图中叉掉了),再进行下一个任务,执行,打印2
由此,执行出来的结果就是 1 3 2
如图:
总结:先执行同步代码,并输出结果;
遇到异步代码之后,交由浏览器(宿主环境)处理 ===> 事件触发之后进入到任务队列继续执行后续代码;
主线程空闲时,从任务队列中取出任务继续执行;