事件环 宏任务与微任务 练习题

最新推荐文章于 2024-04-14 12:53:38 发布
最新推荐文章于 2024-04-14 12:53:38 发布
阅读量565 收藏 3
点赞数 2
分类专栏： js 文章标签： javascript ui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65402230/article/details/127354935
版权

在这里插入图片描述

宏任务
script/UI渲染/setTimeout/setInterval/setImmediate
messageChnanel/requestAnimationFram/用户交互/ajax
微任务
promise.then /mutationObserver/process.nextTick

setImmediate

在poll阶段完成之后执行
setImmediate与setTimeout执行顺序受进程性能影响
在一个读取文件执行的回调函数内setImmediate先于setTimeout执行

messageChannel

const channel = new MessageChannel();
const { port1, port2 } = channel;
console.log(port1, port2);

在这里插入图片描述

requestAnimationFrame

requestAnimationFrame vs setInterval
1.布局控制的逻辑不同
setInterval 回调有多少DOM操作，进行多少计算 绘制
requestAnimationFrame 把所有DOM操作集中起来 一次性进行统一的计算并进行统一的绘制
2.窗口最小化时 运行情况不同
setInterval 一直执行回调函数
requestAnimationFrame 在最小化窗口时 暂停程序 页面打开时 从暂停的时候 重新开始
3. setInterval 会导致无意义的回调执行 -> 重绘重排(及时时间间隔小于刷新率)
requestAnimationFrame 不会

nextTick

作为微任务是优先于promise执行的

事件循环练习题

document.body.style.backgroundColor = 'orange';
console.log(1);

setTimeout(() => {
  document.body.style.backgroundColor = 'green';
  console.log(2);
}, 100);

Promise.resolve(3).then((num) => {
  document.body.style.backgroundColor = 'purple';
  console.log(num);
});

console.log(4);


bgColor: orange -> 每渲染
1
4
bgColor: purple -> 渲染
3
bgColor: green -> 没渲染
2
bgColor: green -> 渲染

Promise.resolve().then(() => {
  console.log('p1');
  setTimeout(() => {
    console.log('s2');
  }, 0);
});

setTimeout(() => {
  console.log('s1');
  Promise.resolve().then(() => {
    console.log('p2');
  });
});

在这里插入图片描述Promise(executor) 执行器同步代码

console.log(1);

setTimeout(() => {
  console.log(2);
}, 10);

new Promise(function (resolve, reject) {
  console.log(3);
  resolve('');
  console.log(4);
}).then((res) => {
  console.log(5);
});
console.log(6);

在这里插入图片描述
当去掉resolve(‘’) 就不会打印5

console.log(1);

setTimeout(() => {
  console.log(2);
}, 10);

new Promise(function (resolve, reject) {
  console.log(3);
  console.log(4);
}).then((res) => {
  console.log(5);
});
console.log(6);

在这里插入图片描述

console.log(1);

setTimeout(() => {
  console.log(2);
}, 10);

new Promise(function (resolve, reject) {
  console.log(3);
  reject('');
  console.log(4);
}).then((res) => {
  console.log(5);
});
console.log(6);

在这里插入图片描述

console.log(1);

setTimeout(() => {
  Promise.resolve().then(() => {
    console.log('p2', 2);
  });
  console.log(2);
}, 10);

new Promise(function (resolve, reject) {
  console.log(3);
  resolve('');
  console.log(4);
}).then((res) => {
  setTimeout(() => {
    console.log('p1', 5);
  }, 0);
});
console.log(6);

在这里插入图片描述

console.log(1);

setTimeout(() => {
  Promise.resolve().then(() => {
    console.log('p2', 2);
  });
  console.log(2);
}, 10);

new Promise(function (resolve, reject) {
  console.log(3);
  resolve('');
  console.log(4);
}).then((res) => {
  setTimeout(() => {
    console.log('p1', 5);
  }, 20);
});
console.log(6);

在这里插入图片描述

let res = function () {
  console.log(1);
  return new Promise((resolve, reject) => {
    console.log(2);
    resolve(4);
  });
};

new Promise(async (resolve, reject) => {
  console.log(3);
  let test = await res();
  /*
		await res()
		new Promise((resolve,reject)=>{
			console.log(2)
			resolve(4)
		}).then((res)=>{})

		res().then((res)=>{
			console.log(test)
		})
	*/
  console.log(test);
});

console.log(5);

new Promise((resolve, reject) => {
  console.log(6);
});
console.log(7);

在这里插入图片描述

let res = function () {
  console.log(1);
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      new Promise((resolve) => {
        console.log(2);
        setTimeout(() => {
          console.log(3);
        });
      });
    }, 0);
    resolve(5);
  });
};

new Promise(async (resolve, reject) => {
  setTimeout(() => {
    Promise.resolve().then(() => {
      console.log(4);
    });
  }, 0);
  let test = await res();
  console.log(test);
});

setTimeout(() => {
  console.log(6);
}, 0);

new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log(7);
  }, 0);
});
console.log(8);

在这里插入图片描述事件处理函数的回调是宏任务
每执行完一个红任务 清空此时的微任务队列

var oBtn = document.getElementById('btn');

oBtn.addEventListener(
  'click',
  () => {
    console.log('1');
    Promise.resolve('m1').then((str) => {
      console.log(str);
    });
  },
  false
);

oBtn.addEventListener('click', () => {
  console.log('2');
  Promise.resolve('m2').then((str) => {
    console.log(str);
  });
});

oBtn.click();

在这里插入图片描述
但是点击调用时
在这里插入图片描述

var oBtn = document.getElementById('btn');

oBtn.addEventListener(
  'click',
  () => {
    setTimeout(() => {
      console.log('1');
    });
    Promise.resolve('m1').then((str) => {
      console.log(str);
    });
  },
  false
);

oBtn.addEventListener('click', () => {
  setTimeout(() => {
    console.log('2');
  });
  Promise.resolve('m2').then((str) => {
    console.log(str);
  });
});

oBtn.click();

在这里插入图片描述

console.log('start');

const interval = setInterval(() => {
  console.log('setInterval');
}, 0);

setTimeout(() => {
  console.log('setTimeout 1');
  Promise.resolve()
    .then(() => {
      console.log('promise 3');
    })
    .then(() => {
      console.log('promise 4');
    })
    .then(() => {
      setTimeout(() => {
        console.log('setTimeout 2');
        Promise.resolve()
          .then(() => {
            console.log('promise 5');
          })
          .then(() => {
            console.log('promise 6');
          })
          .then(() => {
            clearInterval(interval);
          });
      }, 0);
    });
}, 0);

Promise.resolve()
  .then(() => {
    console.log('promise 1');
  })
  .then(() => {
    console.log('promise 2');
  });

start
promise 1
promise 2
setInterval
setTimeout 1
promise 3
promise 4
setInterval
setTimeout 2
promise 5
promise 6

setTimeout(() => {
  console.log('setTimeout 1');
  setTimeout(() => {
    console.log('setTimeout 3');
  }, 1000);

  Promise.resolve().then((data) => {
    console.log('then3');
  });
}, 1000);

Promise.resolve().then((data) => {
  console.log('then1');
  console.log('then4');
  Promise.resolve().then((data1) => {
    console.log('then6');
  });
});

Promise.resolve().then((data) => {
  console.log('then2');
  console.log('then5');
  setTimeout(() => {
    console.log('setTimeout 2');
  }, 1000);
});
console.log(2);

在这里插入图片描述

setTimeout(function () {
  console.log(1);
}, 0);

new Promise(function (resolve, reject) {
  console.log(2);
  resolve();
})
  .then(function () {
    console.log(3);
  })
  .then(function () {
    console.log(4);
  });

console.log(6);

在这里插入图片描述

console.log('1');
setTimeout(function () {
  console.log('2');
  new Promise(function (resolve) {
    console.log('3');
    resolve();
  }).then(function () {
    console.log('4');
  });
});
new Promise(function (resolve) {
  console.log('5');
  resolve();
}).then(function () {
  console.log('6');
});
setTimeout(function () {
  console.log('7');
});
setTimeout(function () {
  console.log('8');
  new Promise(function (resolve) {
    console.log('9');
    resolve();
  }).then(function () {
    console.log('10');
  });
});
new Promise(function (resolve) {
  console.log('11');
  resolve();
}).then(function () {
  console.log('12');
});
console.log('13');

在这里插入图片描述

async function async1(){
	console.log('a1 start')
	await async2()
	/*
		async2().then(res=>{
			console.log('a1 end');
		})
	*/
	console.log('a1 end')
}

async function async2(){
	console.log('async2')
}

console.log('script start')

setTimeout(function(){
	console.log('setTimeout')
},0)

async1()

new Promise(function (resolve){
	console.log('promise1')
	resolve()
}).then(function(){
	console.log('promise2')
})

console.log('script end')

在这里插入图片描述

async function async1() {
  console.log('async1 start');
  await async2();
  /*
		async2().then(res=>{
			console.log('a1 end');
		})
	*/
  console.log('async1 end');
}

async function async2() {
  new Promise(function (resolve) {
    console.log('promise1');
    resolve();
  }).then(function () {
    console.log('promise2');
  });
}

console.log('script start');

setTimeout(function () {
  console.log('setTimeout');
}, 0);

async1();

new Promise(function (resolve) {
  console.log('promise3');
  resolve();
}).then(function () {
  console.log('promise4');
});

console.log('script end');

在这里插入图片描述

async function async1() {
  console.log('async1 start');
  await async2();
  /*
		async2().then(res=>{
			setTimeout(function () {
			console.log('setTimeout1');
  }, 0);
		})
	*/
  setTimeout(function () {
    console.log('setTimeout1');
  }, 0);
}

async function async2() {
  setTimeout(function () {
    console.log('setTimeout2');
  }, 0);
}

console.log('script start');

setTimeout(function () {
  console.log('setTimeout3');
}, 0);

async1();

new Promise(function (resolve) {
  console.log('promise1');
  resolve();
}).then(function () {
  console.log('promise2');
});

console.log('script end');

在这里插入图片描述

var promise = new Promise(resolve=>{
	console.log(1)
	resolve()
})
setTimeout(()=>{
	console.log(2)
})
promise.then(()=>{
	console.log(3)
})
var promise2 = getPromise()
async function getPromise(){
	console.log(5)
	await promise
	console.log(6)
} 
console.log(8)

在这里插入图片描述

const LazyMan = function (name) {
  console.log(`Hi i am ${name}`);
  function _eat(food) {
    console.log(`I am eating ${food}`);
  }
  const callbacks = [];
  class F {
    sleep(timeout) {
      setTimeout(function () {
        console.log(`等待了${timeout}秒...`);
        callbacks.forEach((cb) => cb());
      }, timeout);
      return this;
    }
    eat(food) {
      callbacks.push(_eat.bind(null, food));
      return this;
    }
  }
  return new F();
};

LazyMan('Tony').sleep(10).eat('lunch');

在这里插入图片描述

_聪明勇敢有力气
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
宏任务与微任务习题
Donnien的博客
06-29 196
// setTimeout就是作为宏任务来存在的，而Promise.then则是具有代表性的微任务， // 上述代码的执行顺序就是按照序号来输出的。 // setTimeout((_) => console.log(4)); // new Promise((resolve) => { // resolve(); // console.log(1); // }).then((_) => { // console.log(3); // }); // console.log(2)
js事件循环机制习题，微任务与宏任务的执行循序。
小祥编程擅长前端
11-08 362
1、代码：分为【宏任务】与【微任务代码】【宏任务】：包括主代码块、定时器代码、dom节点事件触发代码、ajax代码；（主代码块： script标签包着这些代码）【微任务】 promise实例对象的.then(回调函数)2、宏任务与微任务都会去【宿主环境】。3、这些代码里面回调函数到了要执行点的时候，不是直接去【主线程】,而是去【任务队列】。
EventLoop事件循环，宏任务、微任务及练习题
wxiao_xiao_miao的博客
12-08 741
JavaScript 是一门单线程执行的编程语言。也就是说，同一时间只能做一件事情。如果前一个任务非常耗时，则后续的任务就不得不一直等待，从而导致程序假死的问题。 为了防止某个耗时任务导致程序假死的问题，JavaScript 把待执行的任务分为了两类： 同步任务（synchronous）：又叫做非耗时任务，指的是在主线程上排队执行的那些任务， 只有前一个任务执行完毕，才能执行后一个任务。 异步任务（asynchronous）：又叫做耗时任务，异步任务由JavaScript 委托给宿...
微任务宏任务练习题
weixin_44656298的博客
03-03 283
注意async函数中有return与没return是有区别的！！！ 两种方法请自行尝试！ console.log('start'); async function async1(){ console.log('async1 start'); await async2() console.log('async1 end'); } async function async2(){ new Promise(resolve => { // 有return和没return的区别 con
宏任务/微任务分析题
我欲乘风破浪
04-13 470
async function foo() { console.log('foo'); } async function bar() { console.log('bar start'); await foo(); console.log('bar end'); } console.log('script start'); setTimeout(function () { con...
【面试题】宏任务和微任务
zx1041561837的博客
12-13 3770
本文介绍了什么是宏任务，什么是微任务，以及宏任务、微任务和DOM渲染之间的关系，并从event loop的角度解释了宏任务和微任务执行次序的原理。
JS 基础（三）：JS 异步与单线程、 event-loop、ES8:async/await、宏任务和微任务、练习题
m0_50134014的博客
07-04 143
js异步 文章目录一、异步与js单线程1.1 同步与异步的区别1.2 promise简介二、 event-loop2.1 event-loop事件轮询机制2.2 再谈promise三、 async/await3.1用同步的方式，编写异步。3.2 与promise的关系3.3异步的本质3.4 for...of四、 宏任务和微任务练习题：Promise catch 连接 thenasync/await 语法问题Promise 和 setTimeout 顺序执行顺序问题 一、异步与js单线程  &nbs
事件循环、宏任务与微任务、Promise与 Async/Await以及常见面试题
xiaoxiaotututu的博客
07-19 648
事件循环（event loop） JS分为同步任务和异步任务，同步任务会在主线程上执行（形成执行栈，先进后出），异步任务会先放置在任务队列中（先进先出）； 当主线程上的同步任务全部执行完成后，js会在任务队列中依次取出异步任务并执行。 JS主线程不断的循环往复的从任务队列中读取任务，执行任务，这中运行机制遍称为事件循环。 但事件循环中的任务队列并不是唯一的，每个事件循环都有一个微任务队列以及多个宏任务队列。 宏任务（Macrotasks）与微任务（Microtasks） 异步任务可分为 宏任务 和 微任
JS-微任务与宏任务面试题练习
m0_48025435的博客
04-15 456
微任务与宏任务面试题 console.log('script start'); setTimeout(function() { console.log('setTimeout'); }, 0); Promise.resolve().then(function() { console.log('promise1'); }).then(function() { console.log('promise2');}); console.log('script
javaScript基础面试题 ---宏任务微任务
weixin_43850639的博客
03-06 647
JS是单线程语言，先执行同步任务，再执行事件循环，事件循环里面包括微任务、宏任务。微任务执行了完了之后，才执行宏任务。微任务：Promise.then。宏任务：setTimeout
宏任务async Promise与微任务题目
大赚万万亿
03-24 572
前端面试必考题：JavaScript事件循环(Event loop)、宏任务微任务(1)
最新发布
m0_60634964的博客
04-14 609
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
宏任务和微任务讲解（附带例题）
qq_41591368的博客
10-21 1315
宏任务 分类：setTimeout、setInterval、requestAnimationFrame 特点： 宏任务所处的队列即为宏任务队列 第一个宏任务队列只有一个任务，执行主线程中的js代码 宏任务队列可以有多个 当宏任务队列中的任务执行完毕之后，会查看是否有微任务队列，有则执行微任务 队列中的任务，没有则查看是否有宏任务队列 微任务 分类：Promise的回调函数、 process.nextTick 特点： 微任务所处的队列即为微任务队列 只有一个微任务队列 在上一个宏任务队列执行完毕之后如果
前端面试必考题：JavaScript事件循环(Event loop)、宏任务微任务
weixin_60297362的博客
03-05 1791
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录一、事件循环二、宏任务/微任务无渲染有渲染 一、事件循环 我们都知道，Js引擎是单线程的，也就是说每次执行一堆程序，必须是一个执行完再去执行另一个。那可能有人要问了：平时我们开启setTimeout定时器，也没见影响到后面程序的运行啊！是因为javascript从诞生之日起就是一门单线程的非阻塞的脚本语言。而它的非阻塞性是通过异步任务来实现的，可见setTimeout就是一个异步任务。 那么从上图我们就可以得知：实现异步任务，就
宏任务和微任务、事件循环、面试题
小陈的博客
08-30 1684
事件循环比较简单，它是一个在 “JavaScript 引擎等待任务”，"执行任务"和"进入休眠状态等待更多任务"这几个状态之间转换的无限循环。
宏任务和微任务---附带练习题
m0_46512929的博客
06-02 978
一、理解宏任务和微任务 这个就像去银行办业务一样，先要取号进行排号。 一般上边都会印着类似：“您的号码为XX，前边还有XX人。”之类的字样。 因为柜员同时职能处理一个来办理业务的客户，这时每一个来办理业务的人就可以认为是银行柜员的一个宏任务来存在的，当柜员处理完当前客户的问题以后，选择接待下一位，广播报号，也就是下一个宏任务的开始。 所以多个宏任务合在一起就可以认为说有一个任务队列在这，里边是当前银行中所有排号的客户。任务队列中的都是已经完成的异步操作，而不是说注册一个异步任务就会被放在这个任务队列中，
宏任务微任务练习
qq_66349348的博客
11-04 105
宏任务微任务练习
浏览器事件循环机制、宏任务和微任务
攻城狮不是猫
03-15 1177
但是它们在面试中出现的频率特别高，因为熟悉这些思维训练，有利于考察我们对JS单线程、事件循环机制、宏任务和微任务等原理的掌握程度。等时间到了之后，再进入 任务队列 （Event Queue）排队（排队是因为同一时间，JS 只能执行一个任务），先进先出。在早期，异步任务中只有宏任务，没有微任务。当主线程的任务执行完毕之后，此时主线程处于空闲状态，于是会去读取 Event Queue 中的任务队列，如果有任务，则进入到主线程去执行。如果微任务队列不为空，那就优先执行微任务队列中的任务。比如：close事件。
一道经典的宏任务和微任务题目（javascript）
慢慢爬的虫的博客
03-16 398
前端笔试题，输出结果顺序
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_聪明勇敢有力气

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值