（详解）js中什么是宏任务、微任务？宏任务、微任务有哪些？又是怎么执行的？

曾经终败给现在 2023-10-09 21:55 66阅读 0赞

**目录**

参考资料

必看强烈建议十分钟看完视频 ，即可学会

必看参考详解宏任务微任务

笔记

宏任务与微任务

定时器的任务编排

promise的微任务处理逻辑

DOM渲染任务

任务队列共享内存

进度条的实现

任务拆分成多个任务

promise复杂任务分割

img算同步还是异步？

--------------------

## 参考资料 ##

[1 宏任务与微任务\_哔哩哔哩\_bilibili][1 _bilibili]

[什么是宏任务、微任务？宏任务、微任务有哪些？又是怎么执行的？\_什么是宏任务和微任务\_F N Janine的博客-CSDN博客][F N Janine_-CSDN]

[后盾人 宏任务微任务，任务调度流程课程笔记\_哑山的博客-CSDN博客][_-CSDN]

## 必看强烈建议十分钟看完视频 ，即可学会 ##

[1 宏任务与微任务\_哔哩哔哩\_bilibili][1 _bilibili]

## 必看参考详解宏任务微任务 ##

[什么是宏任务、微任务？宏任务、微任务有哪些？又是怎么执行的？\_什么是宏任务和微任务\_F N Janine的博客-CSDN博客][F N Janine_-CSDN]

## 笔记 ##

#### 宏任务与微任务 ####

> **问：js是否分同步与异步？具体是什么样子的？**  
> 答：js是单线程语言，分为主线程与任务队列。同步的在主线程里执行，当主线程的任务执行完毕，会轮询任务队列里的任务，有的话拿到主线程去执行，没有的话，就不做。  
> **问：什么是微任务与宏任务？**  
> 答：微任务也是异步队列，遵循上述的机制。但是他的优先级比宏任务高，会优先被轮询并执行。

#### 定时器的任务编排 ####

> **问：定时器的时间在哪里计算的？**  
> 答：定时器模块里，在时间到的时候，把定时器任务（回调函数）放到任务队列里。  
> **问：定时器的任务是时间到了立刻执行吗？或者是主线程任务执行完后才开始计时？**  
> 答：不是的，需要等到主线程里任务都执行干净后才会轮询任务队列，拿出任务并执行。并且，计时和执行任务是两部分。计时和主线程的任务无关。

#### promise的微任务处理逻辑 ####

> **问：promise是同步还是异步？**  
> 答：promise的构造代码是同步，里面的函数会立刻执行。但是promise的.then或者被await的部分是异步执行的，放在微任务队列里的。

#### DOM渲染任务 ####

> **问：DOM与JS互相阻塞么？**  
> 答：是的，DOM加载时会阻塞JS的内容。同理JS也会阻塞DOM。  
> **问：那JS里的异步会在DOM加载后执行，还是中间就执行了？**  
> 答：既然只有一个主线程，肯定不能同时渲染DOM，没渲染完就再轮询个任务队列。所以DOM未渲染完的话，JS的任务队列应该会继续等待。

#### 任务队列共享内存 ####

> **问：既然是两个任务队列，那任务从宏队列的任务怎么拿到主线程的变量呢？**  
> 答：这个问题问得好，因为宏任务执行的前提条件是主线程去轮询并拿到任务。而拿到任务这个过程，其实就把任务从宏队列挪到了主线程，也就在进入到主线程的环境里，就拿到了主线程的变量。

#### 进度条的实现 ####

> **问：如何实现一个简易的进度条？**  
> 答：利用任务队列共享内存的机制。我们用一个有色长方形的当做进度条，当他的宽度不断增加时，就实现了进度条的效果。我们可以让一个函数不断的通过setTImeout调用它自己，时间在200ms左右，再定义一个计数器赋值为0。当计数器大于100时，就停止执行。  
> 上代码

<div class="progressBar"></div>
        <style>
          .progressBar {
            height: 40px;
            background: rgb(64, 143, 33);
            width: 0px;
            color: #fff;
          }
        </style>
        <script>
          let i = 0;
          function run() {
            if (i >= 100) {
              return;
            } else {
              i++;
              let dom = document.querySelector(".jindu");
              dom.style.width = i + "px";
              dom.innerHTML = i + "%";
              setTimeout(run, 50);
            }
          }
          run();
        </script>

#### 任务拆分成多个任务 ####

> **问：为什么要拆分任务？**  
> 答：在js中，因为只有一个线程，如果某个任务过大的话，就会尝试阻塞其他任务，造成视觉的上卡顿，影响用户体验。  
> **问：如何拆分任务？**  
> 答：很简单，将任务分块后扔到setTimeout里去执行就好。至于0块还是100块，看你的需求。多个任务的执行方法是递归。与上一个模块【进度条的实现】十分类似，都采用递归setTimeout自己的方法去做。

#### promise复杂任务分割 ####

> **问：promise怎么分割？**  
> 答：思想和setTImeout一致，用promise把代码包起来，这样代码就到了微任务里，成了异步函数，从而无法阻塞后面的主线程的执行。

#### img算同步还是异步？ ####

> 图片处理有专门的模块，当下载完成后，会被放进任务队列（onload这个方法），等待主线程来轮询  
> ps：加载文件的模块，没有先后顺序，是谁先加载完谁先跑，先进队列。这个是队列的一大区别。

[1 _bilibili]: https://www.bilibili.com/video/BV1eJ41177Rg?p=1&vd_source=9497a07b4c66a69fcd28375760bc991e
[F N Janine_-CSDN]: https://blog.csdn.net/NancyFyn/article/details/118407548?spm=1001.2014.3001.5506
[_-CSDN]: https://blog.csdn.net/qq_31076033/article/details/117037625