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

目录
相关文章
|
6天前
|
JavaScript 前端开发
js中的宏任务与微任务
js中的宏任务与微任务
|
1月前
|
JavaScript 前端开发 测试技术
编写JavaScript模块化代码主要涉及将代码分割成不同的文件或模块,每个模块负责处理特定的功能或任务
【5月更文挑战第10天】编写JavaScript模块化代码最佳实践:使用ES6模块或CommonJS(Node.js),组织逻辑相关模块,避免全局变量,封装细节。利用命名空间和目录结构,借助Webpack处理浏览器环境的模块。编写文档和注释,编写单元测试以确保代码质量。通过这些方法提升代码的可读性和可维护性。
28 3
|
1月前
|
JavaScript 前端开发
前端 JS 经典:宏任务、微任务、事件循环(EventLoop)
前端 JS 经典:宏任务、微任务、事件循环(EventLoop)
27 0
|
1月前
|
存储 JavaScript 前端开发
JS的执行原理,一文了解Event Loop事件循环、微任务、宏任务
了解JavaScript的事件循环和任务队列对于处理异步任务至关重要。事件循环由主线程和任务队列组成,当主线程执行完同步任务后,会检查任务队列,按顺序执行宏任务和微任务。宏任务包括`setTimeout`等,微任务如`Promise`的回调。在实际开发中,事件循环保证了代码的非阻塞执行,提高了用户体验。例如,`setTimeout`的回调会在当前宏任务结束后,所有微任务执行完才会执行。理解这一机制对于解决面试中的异步问题非常有帮助。
36 0
JS的执行原理,一文了解Event Loop事件循环、微任务、宏任务
|
13天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的校园竞赛管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的校园竞赛管理系统附带文章源码部署视频讲解等
162 63
|
13天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的小型医院医疗设备管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的小型医院医疗设备管理系统附带文章源码部署视频讲解等
28 6
|
13天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的校园健康驿站管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的校园健康驿站管理系统附带文章源码部署视频讲解等
35 5
|
13天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的箱包存储系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的箱包存储系统附带文章源码部署视频讲解等
26 5
|
13天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
26 3
|
13天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
24 3