(详解)js中什么是宏任务、微任务?宏任务、微任务有哪些?又是怎么执行的?

简介: (详解)js中什么是宏任务、微任务?宏任务、微任务有哪些?又是怎么执行的?

 


参考资料

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:加载文件的模块,没有先后顺序,是谁先加载完谁先跑,先进队列。这个是队列的一大区别。

目录
相关文章
|
2月前
|
JavaScript 前端开发 API
详解队列在前端的应用,深剖JS中的事件循环Eventloop,再了解微任务和宏任务
该文章详细讲解了队列数据结构在前端开发中的应用,并深入探讨了JavaScript的事件循环机制,区分了宏任务和微任务的执行顺序及其对前端性能的影响。
|
18天前
|
JavaScript 前端开发 调度
在JavaScript中异步任务里的微任务和宏任务的特点和生命周期
在JavaScript中异步任务里的微任务和宏任务的特点和生命周期
34 0
|
2月前
|
前端开发 JavaScript API
JavaScript 的宏任务和微任务有什么区别
【9月更文挑战第6天】JavaScript 的宏任务和微任务有什么区别
43 4
|
3月前
|
存储 前端开发 JavaScript
JavaScript 并发任务控制
【8月更文挑战第31天】JavaScript 并发任务控制
35 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
85 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
106 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
78 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
69 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
87 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
79 3