时间循环和消息队列

274 阅读4分钟

JS采用单线程模式工作的原因

为了回答这个问题我们首先需要知道JS的执行环境是单线程的,是因为JS语言最早是运行在浏览器端的语言,目的是为了实现页面上的动态交互。实现动态交互的核心就是DOM操作,因此决定了JS必须是单线程模式工作。我们来假设一下如果JS是多线程一起工作的,其中一个线程修改了一个DOM元素,另外的一个线程同时又要删除这个DOM元素,那么此时浏览器就懵逼了,无法明确以哪个工作线程为准。所以为了避免线程同步的问题,JS就被设计成了单线程的工作模式。

注意,我们这里说的单线程是JS的执行环境是单线程,浏览器中是多线程的。

单线程的优势和弊端

采用单线程的工作模式可以节省内存,节约上下文切换时间,没有锁的问题。但弊端也很明显,如果中间有一个任务需要花费大量的时间,那么后面的任务就需要等待这个任务完成后才能执行,就会出现假死的情况,对用户很不友好。为了解决这个问题JS给出了两种执行模式:同步模式(Synchronous)和异步模式(Asynchronous)

同步模式和异步模式

同步模式

同步模式其实很好理解,举个栗子:

我们如果按照同步模式煮面的话,首先先将锅里装上水,打开火开始烧水,等待水烧开,再将面、鸡蛋、火腿肠等材料拿出,材料准备好后放入锅中进行煮,煮好后开始干饭。

在这里其实我们已经能够看出来问题,我们必须等到水烧开后才去准备要煮的材料。回到概念里就是在同步模式下我们的代码是依次执行,后一个任务必须等待前一个任务结束才能开始执行。程序执行的顺序和代码编写的顺序是完全一致的。在单线程模式下,大多数任务都是以同步模式执行。

异步模式

上个例子中我们在等待水烧开的过程中什么都没干,很浪费时间,我们可以在烧水的过程中将食材都准备好,等到水烧开后直接放入。

我们在烧水的过程中去干了别的事情,就属于异步模式,异步模式中不会等待异步任务的结束才开始执行下一个同步的任务,都是开启过后就立即执行下一个任务。

异步模式对于JS很重要,没有异步模式的话我们就无法同时处理大量的耗时任务,就会给用户带来卡顿和假死的体验。对于我们开发者来说,会给我们打开代码执行的顺序混乱的问题。

EventLoop事件循环和消息队列

  • EventLoop是一种循环机制,主线程从消息队列中读取任务并按照顺序执行,这个过程是循环不间断的。
  • 消息队列是存放异步任务的地方,当我们的同步任务都执行完毕后,EventLoop会从消息队列中依次取出异步任务放到调用栈中进行执行。

宏任务和微任务

  • 宏任务可以理解为每次执行栈执行的代码就是一个宏任务

    浏览器为了让JS内部宏任务与DOM操作能够有序的执行,会在一个宏任务执行结束后,下一个宏任务执行开始前,对页面进行重新渲染。

    宏任务包括:script整体代码、setTimeout、setInterval、I/O、UI交互事件、MessageChannel等。

  • 微任务可以理解为每个宏任务执行结束后立即执行的任务,发生在宏任务后,渲染之前,执行微任务。

    所以微任务的响应速度相比宏任务会更快,因为无需等待UI渲染

    微任务包括:Promise.then、MutaionObserver、process.nextTick(Node.js环境下)等。