程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

js中事件循环是什么?宏任务和微任务呢?

发布于2021-05-30 06:58     阅读(1149)     评论(0)     点赞(6)     收藏(5)


【问】js中事件循环是什么?宏任务和微任务又是什么?

  • 事件循环
    【答】js的特点是单线程,即同一时间只能干一件事情,当然这是基于他的主要运行环境是浏览器而这样设计的(创立js之初,主要运行在浏览器环境。其一这样的场景没必要用复杂的多线程,其二单线程设计避免了很多复杂的同步问题。但后来的发展,js现在也可以运行在非浏览器环境如nodejs中,但依然是单线程)。但单线程就意味着所有任务需要排队运行,如某一个任务耗时很长(如网络请求等),就会让后面的任务一直处于等待状态,为了解决这个问题,js中将任务分为两类:同步任务和异步任务。同步任务是在主线程上排队马上执行的任务,异步任务是延后执行(至少要等到同步任务执行完毕后),不进入主线程而在任务队列中的任务。运行机制是:1. 所有同步任务都在主线程执行; 2. 任务队列中存放的是某些有了运行结果的异步任务的事件; 3. 所有同步任务执行完毕后,就读取任务队列中该事件对应的异步任务,开始执行;4. 不断循环第3步。上面这个循环机制即事件循环机制。

  • 宏任务和微任务
    【答】
    宏任务:setTimeout、setInterval、dom事件、Ajax请求等
    微任务:promise,async/await 等
    执行时机:微任务 > DOM渲染 > 宏任务

【测试】

var childDom = document.createElement("div");
childDom.innerHTML = "dom测试";
document.body.appendChild(childDom);

console.log(1);

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

setTimeout(() => {
	console.log('3 setTimeout');
	alert('alert setTimeout');
}, 0);

console.log(4)
//打印顺序是
//1
//4
//2 promise
//3 setTimeout
//【结论】通过测试发现:微任务(promise)最早执行,接着是dom渲染执行(使用alert是为了阻止继续执行),最后是宏任务(setTimeout)执行。

在这里插入图片描述
在这里插入图片描述
参考1:JavaScript 运行机制详解:再谈Event Loop
参考2:事件原理讲解,超级硬核-哔哩哔哩
参考3:宏任务和微任务 - 哔哩哔哩




所属网站分类: 技术文章 > 博客

作者:Bhbvhbbgg

链接:http://www.qianduanheidong.com/blog/article/115869/2d23fc642b7edf80b6c9/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

6 0
收藏该文
已收藏

评论内容:(最多支持255个字符)