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

目录

参考资料

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

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

笔记

宏任务与微任务

 定时器的任务编排

 promise的微任务处理逻辑

DOM渲染任务 

 任务队列共享内存

进度条的实现 

 任务拆分成多个任务

 promise复杂任务分割

img算同步还是异步？ 

---

参考资料

1 宏任务与微任务_哔哩哔哩_bilibili

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

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

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

1 宏任务与微任务_哔哩哔哩_bilibili

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

什么是宏任务、微任务？宏任务、微任务有哪些？又是怎么执行的？_什么是宏任务和微任务_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：加载文件的模块，没有先后顺序，是谁先加载完谁先跑，先进队列。这个是队列的一大区别。