说说你对事件循环event loop的理解？

最新推荐文章于 2024-12-02 16:47:07 发布

原创最新推荐文章于 2024-12-02 16:47:07 发布 · 209 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

JavaScript是一种单线程语言，为了处理异步操作，采用了事件循环机制。事件循环分为浏览器和Node.js环境，同步任务按顺序执行，异步任务分为宏任务和微任务，分别在不同的队列等待执行。宏任务包括script、setTimeout等，微任务如Promise.then、MutationObserver。当所有同步代码执行完后，先执行微任务队列，再执行宏任务队列，以此循环直到所有任务完成。

1.javaScript单线程的介绍

首先我们要先知道JavaScript是一种单线程的编程式语言，同一时间内只能做一件事，所有的任务都是需要排队完成的。
那么问题来了，为什么JS不能有多个线程呢？
这里给大家做了解释：JavaScript作为浏览器脚本语言，其主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。例如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准。因此为了避免这种复杂性，因此JS只能是单线程。

2.事件循环机制（Event Loop）

介绍：

事件循环分为两种,分别是浏览器事件循环和node.js事件循环，JavaScript是一门单线程语言，意思是主线程只有一个。Event Loop事件循环机制，其实就是JS引擎管理事件执行的一个流程，具体由运行环境确定。
目前JS的主要运行环境有两个，浏览器和Node.js。
事件循环机制告诉了我们JS代码的执行顺序，是指浏览器或Node的一种解决JS单线程运行时不会阻塞的一种机制。
浏览器的事件循环又分为同步任务和异步任务

3.同步任务和异步任务介绍

同步任务

含义：在主线程上排队执行的任务，只有上一个任务执行完毕，才能执行后一个任务

异步任务

含义：不进入主线程，而进入“任务队列（task queue）”的任务，只有“任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
分类：异步任务又分为宏任务和微任务。所有同步任务都在主线程上执行，形成一个函数调用栈（执行栈），而异步则先放到任务队列（task queue）里，任务队列又分为宏任务（macro-task）与微任务（micro-task）。

4.宏任务与微任务

宏任务包括：script(整体代码)、setTimout、setInterval（以及：I/O、UI交互事件）
微任务包括：new promise().then(回调)、MutationObserver(html5新特新)、Object.observe(已废弃)、process.nextTick（node环境）
若同时存在promise和nextTick，则先执行nextTick

5.执行顺序

先执行同步代码，
遇到异步宏任务则将异步宏任务放入宏任务队列中，
遇到异步微任务则将异步微任务放入微任务队列中，
当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行，
微任务执行完毕后再将异步宏任务从队列中调入主线程执行，
一直循环直至所有任务执行完毕。

注意：当宏任务和微任务都处于任务队列（Task Queue）中时，微任务的优先级大于宏任务，即先将微任务执行完，再执行宏任务；

例如：

      setTimeout(() => {
        console.log("4");
        setTimeout(() => {
          console.log("8");
        }, 0);
        new Promise((r) => {
          console.log("5");//构造函数是同步的
          reslove();
        }).then(() => {
          console.log("7");//then()是异步的微任务，这里已经入队列
        });
        console.log("6");
      }, 0);
 
      new Promise((r) => {
        console.log("1");//构造函数是同步的
        reslove();
      }).then(() => {
        console.log("3");//then()是异步的微任务，这里已经入队列
      });
      console.log("2");
//输出顺序：1 2 3 4 5 6 7 8