Js 的事件循环

78 阅读3分钟

事件循环

1.JavaScript是一门单线程脚本语言,这意味着JavaScript中的所有代码都是按照顺序一行一行执行的。

为了处理异步操作,JavaScript引入了事件循环机制(Event Loop)来协调异步操作和同步代码的执行。

2.浏览器的进程模型。

2.1 进程 举例:启动程序王者荣耀

程序运行要有自己的内存空间,程序的内存空间==扩容

image.png 程序间相互隔离,出问题互不影响,但是可以通信(双方同意)。

2.2 线程(进程分配内存空间后,可以有多个线程)

为了不轻易崩溃,浏览器会启用多进程(每个进程又会有多个线程) image.png 每个进程的内存空间是独立的

image.png

主要进程:

image.png 渲染主进程:重中之重:

image.png

3.回归

排队 image.png 事件循环:

image.png

事件循环

事件循环是指不断从任务队列中取出任务,并执行其对应的回调函数的过程。事件循环在JavaScript引擎内部以非常高效的方式运行,在等待异步I/O操作返回数据时,可以将CPU时间释放给其他线程使用。

事件循环的基本流程如下: JavaScript引擎在执行JavaScript代码时,会将任务分为两类:同步任务异步任务。同步任务在主线程上执行,而异步任务则由任务队列中的事件循环机制异步执行。在异步任务完成后,就会将该任务对应的回调函数放入任务队列中,并等待主线程执行完当前所有的同步任务后再执行该回调函数。

  1. 主线程执行同步任务,直到遇到异步任务时,将其回调函数添加到任务队列中,然后继续执行同步任务。
  2. 当所有同步任务执行完成后,主线程会立即去任务队列中查找是否有已经完成的异步任务的回调函数需要执行,如果有,则会按照回调函数添加的先后顺序执行它们。
  3. 执行完所有已经完成的异步任务回调函数后,重复步骤2,直到任务队列中没有任何任务。

任务队列

任务队列是指在JavaScript引擎中用来存储异步任务的队列,任务队列中的每个任务都与一个回调函数相关联。当异步任务执行完成后,JavaScript引擎将相应的回调函数添加到任务队列中,等待主线程执行完当前的同步任务后再执行这些回调函数。

微任务和宏任务

在任务队列中,异步任务被分为微任务和宏任务两种类型。宏任务通常由定时器任务、I/O任务、UI渲染任务等操作触发,而微任务通常由 Promise、MutationObserver 等异步操作触发的回调函数组成。

当主线程空闲时,会先执行当前任务队列中所有的微任务,然后再执行一个宏任务。如果宏任务队列中有多个任务等待执行,则按照先进先出的顺序执行。这样可以保证微任务能够尽可能快地执行,从而提高了程序的响应性和性能。

image.png

image.png