宏任务 微任务 任务队列 事件循环EventLoop

既要知其然,又要知其所以然

JavaScript 语言的一大特点就是单线程,也就是说同一个时间只能处理一个任务。为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为,防止主线程的不阻塞,(事件循环)Event Loop的方案应用而生。
JavaScript 处理任务是在等待任务、执行任务 、休眠等待新任务中不断循环中,也称这种机制为事件循环。

js执行顺序

主线程中的任务执行完后,才执行任务队列中的任务
有新任务到来时会将其放入队列,采取先进先执行的策略执行队列中的任务
比如多个 setTimeout 同时到时间了,就要依次执行

任务包括

script(整体代码)、 setTimeout、setInterval、DOM渲染、DOM事件、Promise、XMLHTTPREQUEST等

宏任务

定时器会放入异步任务队列,也需要等待同步任务执行完成后执行。

微任务

微任务一般由用户代码产生,微任务较宏任务执行优先级更高
Promise.then 是典型的微任务,
实例化 Promise 时执行的代码是同步的,
便then注册的回调函数是异步微任务的

任务执行顺序

任务的执行顺序是同步任务、微任务、宏任务所以下面执行结果是 1、2、3、4

代码案例

	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("后盾人");

你可能感兴趣的:(宏任务 微任务 任务队列 事件循环EventLoop)