参考资料
什么是宏任务、微任务?宏任务、微任务有哪些?又是怎么执行的?_什么是宏任务和微任务_F N Janine的博客-CSDN博客
后盾人 宏任务微任务,任务调度流程课程笔记_哑山的博客-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:加载文件的模块,没有先后顺序,是谁先加载完谁先跑,先进队列。这个是队列的一大区别。