JavaScript 操作宏任务与微任务

宏任务与微任务

  • javaScript是单线程语言（如果多线程dom会疯掉）
  • 所以在同一时间只能执行一个任务，称为主线程，用来执行同步任务
  • 同时还有两个任务列表用于存放异步任务，宏任务、微任务
  • 执行顺序为：主线程=>微任务=>宏任务

有关定时器

  1. 定时器模块，到达时间点将其放入宏任务队列
  2. 如果主线程没有任务则执行，如果有则等待执行完成后再继续执行
  3. 如果有两个相同时间的定时器则上面的先执行下面的后执行
  4. 如果两个时间不同的定时器则时间短的先执行时间长的后执行

注意点：

  • 定时器的⏲是在定时器模块中完成的，完成后就和普通异步任务一样了，
  • 时间方面由于主线程实践过长的原因，有可能会延后

有关Promise

  • promise的构造函数为同步任务
  • 执行顺序永远为：同步=>微任务=>宏任务
  • 在嵌套代码中可能出现宏任务中有同步、宏任务、微任务，这时将他们放到下一次执行中的队列/主线程等待执行
setTimeout(() => {
    console.log("定时器");
    setTimeout(() => {
      console.log("timeout timeout");
    }, 0);
    new Promise(resolve => {
      console.log("settimeout Promise");
      resolve();
    }).then(() => {
      console.log("settimeout then");
    });
  }, 0);
  new Promise(resolve => {
    console.log("Promise");
    resolve();
  }).then(() => {
    console.log("then");
  });
  console.log("ssss");

执行顺序：Promise=>ssss=>then=>定时器=>settimeout Promise=>settimeout then=>timeout timeout

DOM渲染任务

浏览器渲染：CSS+DOM执行遇到js优先执行js
可以把js尽量放在下面：避免白屏

任务共享内存

任务不会同时执行，会一个一个的被调度，他们共享内存

Promise微任务处理复杂业务

使用promise可以将任务变成异步任务使其不影响同步任务的执行

到此这篇关于JavaScript 操作宏任务与微任务的文章就介绍到这了,更多相关JavaScript宏任务与微任务内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript事件循环及宏任务微任务原理解析

    首先看一段代码: 打印顺序是什么? 正确答案:script start, script end, promise1, promise2, setTimeout 其中涉及到事件循环(event loop),宏任务(macrotask),微任务(microtask) 一.事件循环 Event Loop 程序中设置两个线程:一个负责程序本身的运行,称为"主线程":另一个负责主线程与其他进程(主要是各种I/O操作)的通信,被称为"Event Loop线程"(可以译为&quo

  • 浅谈javascript事件环微任务和宏任务队列原理

    JS 事件环 JS 程序的运行是离不开事件环机制的,这个机制保证在发生某些事情的时候我们有机会执行一个我们事先预定好的函数,事情发生的时候 JS 会将相应的函数入栈执行然后出栈,但是关于事件环我们还有一些未知的东西,例如,setTimeout 我们习惯称他为定时器,但是可能很多人没有意识到,这个东西和我们常用的一些事件没什么不同,只不过我们通常所说的事件大多需要用户触发,而 setTimeout 不用用户自己触发,而是指定时间之后触发:那么问题来了,如果我们将时间设置为 0 会发生什么?会立即执

  • JS事件循环机制event loop宏任务微任务原理解析

    首先看一段代码 async function (){ await f2() console.log('f1') } async function f2(){ console.log('f2') } console.log('正常1') f1() setTimeout(()=>{ console.log('定时器') }) console.log('正常2') 正确的打印顺序应该是:正常1,f2 ,正常2,f1,定时器 为什么会出现这样打印顺序呢 首先javascript是一门单线程语言,在最新的

  • 浅谈JavaScript宏任务和微任务执行顺序

    浅谈JavaScript宏任务和微任务执行顺序

    目录 一.JavaScript单线程 1. 同步任务(synchronous) 2. 异步任务(asynchronous) 二.任务队列(task queue) 1.执行栈 扩展一下setTimeout的理解 一.JavaScript单线程 JavaScript是单线程指的是同一时间只能干一件事情,只有前面的事情执行完,才能执行后面的事情.导致遇到耗时的任务时后面的代码无法执行. 在此之前啊 我们必须了解同步和异步 1. 同步任务(synchronous) console.log(123); c

  • JavaScript 操作宏任务与微任务

    JavaScript 操作宏任务与微任务

    宏任务与微任务 javaScript是单线程语言(如果多线程dom会疯掉) 所以在同一时间只能执行一个任务,称为主线程,用来执行同步任务 同时还有两个任务列表用于存放异步任务,宏任务.微任务 执行顺序为:主线程=>微任务=>宏任务 有关定时器 定时器模块,到达时间点将其放入宏任务队列 如果主线程没有任务则执行,如果有则等待执行完成后再继续执行 如果有两个相同时间的定时器则上面的先执行下面的后执行 如果两个时间不同的定时器则时间短的先执行时间长的后执行 注意点: 定时器的⏲是在定时器模块中完成的

  • JavaScript宏任务和微任务区别介绍

    JavaScript宏任务和微任务区别介绍

    目录 分类 宏任务 微任务 为什么 案例 分类 js中的任务,大致分为2类,一类是同步任务,另一类是异步任务.而异步任务,又分为宏任务和微任务,这两个任务是两个队列,所以是先进先出的. 同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务. 异步任务指的是,不进入主线程.而进入"任务队列"的任务,只有等主线程任务执行完毕,"任务队列"开始通知主线程,请求执行任务,该任务才会进入主线程执行 宏任务 主代码块.setTimeout.set

  • JavaScript事件循环剖析宏任务与微任务

    目录 前言 引言 为什么会有事件循环? JS是单线程的 同步任务和异步任务 JS事件循环 宏任务与微任务 常见的宏任务有哪些? 常见的微任务有哪些? 执行过程总结(重点) 同步任务 —> 微任务 —> 宏任务... 案例挑战 案例1: 案例2: 案例3: 前言 相信对于刚学习JavaScript的新手来说,去理解JS中的事件循环原理以及异步执行过程比较困难,但是这是JS必须要会的基础知识,逃避不能解决问题,笔者曾经也被这个知识点困扰过,现根据以往的经验编写此文章,旨在帮助大家彻底搞懂它们以及自

  • JavaScript中的宏任务和微任务详情

    JavaScript中的宏任务和微任务详情

    目录 1.微任务有哪些 2.宏任务有哪些 3.案例 3.1 结论 4.代码案例  4.1 代码分析 4.2 结论和运用的场景 1.微任务有哪些 Promise await和async 2.宏任务有哪些 setTimeout setInterval DOM事件 AJAX请求 3.案例 <script> console.log(1) setTimeout(()=>{ console.log("2") },0) Promise.resolve().then(()=>{

  • javascript操作表格

    Power Table body{ FONT-SIZE: 9pt; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; } input { FONT-SIZE: 9pt; height: 15pt; width:50px; cursor: default; } table{ font-size: 9pt; word-break:break-all; cursor: default; BORDE

  • 详细谈谈React中setState是一个宏任务还是微任务

    详细谈谈React中setState是一个宏任务还是微任务

    目录 前言 面试官的问法是否正确?§ React 是如何控制 setState 的 ?§ 未来会有异步的 setState§ 总结 前言 最近有个朋友面试,面试官问了个奇葩的问题,也就是我写在标题上的这个问题. 能问出这个问题,面试官应该对 React 不是很了解,也是可能是看到面试者简历里面有写过自己熟悉 React,面试官想通过这个问题来判断面试者是不是真的熟悉 React

  • 浅谈js中的宏任务和微任务

    浅谈js中的宏任务和微任务

    目录 1.关于JavaScript 2.JavaScript事件循环 3.宏任务和微任务 4.拓展宏任务微任务 下面一道关于宏任务和微任务的题: setTimeout(function(){ console.log('1') }); new Promise(function(resolve){ console.log('2'); resolve(); }).then(function(){ console.log('3') }); console.log('4') 试问一下上面代码的执行顺序是啥

  • Javascript操作cookie的函数代码

    javascript操作cookie简单版本 复制代码 代码如下: function setCookie(name, value, iDay) { var oDate = new Date(); oDate.setDate(oDate.getDate() + iDay); document.cookie = name+'='+value+';expires='+oDate; } function getCookie(name) { var arr = document.cookie.split(

  • javascript操作ul中li的方法

    本文实例讲述了javascript操作ul中li的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

随机推荐