【JavaScript】事件循环、宏/微任务、面试题

进程和线程

进程(process):计算机已经运行的程序，是操作系统管理程序的一种方式;
线程(thread):操作系统能够运行运算调度的最小单位，通常情况下它被包含在进程中;

听起来很抽象，这里还是给出我的解释:
✅ 进程:我们可以认为，启动一个应用程序，就会默认启动一个进程(也可能是多个进程);
✅ 线程:每一个进程中，都会启动至少一个线程用来执行程序中的代码，这个线程被称之为主线程;
✅ 所以我们也可以说进程是线程的容器;
再用一个形象的例子解释:

• 操作系统类似于一个大工厂;
• 工厂中里有很多车间，这个车间就是进程;
• 每个车间可能有一个以上的工人在工厂，这个工人就是线程;

操作系统 – 进程 – 线程

操作系统的工作方式

❓ _操作系统是如何做到同时让多个进程(边听歌、边写代码、边查阅资料)同时工作呢? _
✅ 这是因为CPU的运算速度非常快，它可以快速的在多个进程之间迅速的切换;
✅ 当我们进程中的线程获取到时间片时，就可以快速执行我们编写的代码;
✅ 对于用户来说是感受不到这种快速的切换的;
◼ 你可以在Mac的活动监视器或者Windows的资源管理器中查看到很多进程:

浏览器中的JavaScript线程

我们经常会说JavaScript是单线程(可以开启workers)的，但是JavaScript的线程应该有自己的容器进程:
浏览器或者Node。
❓ 浏览器是一个进程吗，它里面只有一个线程吗? **
✅ 目前多数的浏览器其实都是多进程的**，当我们打开一个tab页面时就会开启一个新的进程，这是为了防止一个页面卡死而造成所有页面无法响应，整个浏览器需要强制退出;
✅ 每个进程中又有很多的线程，其中包括执行JavaScript代码的线程;
❗ JavaScript的代码执行是在一个单独的线程中执行的:
这就意味着JavaScript的代码，在同一个时刻只能做一件事;
如果这件事是非常耗时的，就意味着当前的线程就会被阻塞;
✅ 所以真正耗时的操作，实际上并不是由JavaScript线程在执行的:

• 浏览器的每个进程是多线程的，那么其他线程可以来完成这个耗时的操作;
• 比如网络请求、定时器，我们只需要在特性的时候执行应该有的回调即可;

浏览器的事件循环

❓ 如果在执行JavaScript代码的过程中，有异步操作呢?

• 中间我们插入了一个setTimeout的函数调用;
• 这个函数被放到入调用栈中，执行会立即结束，并不会阻塞后续代码的执行;

宏任务和微任务

但是事件循环中并非只维护着一个队列，事实上是有两个队列:
✅ 宏任务队列(macrotask queue):ajax、setTimeout、setInterval、DOM监听、UI Rendering等
✅ 微任务队列(microtask queue):Promise的then回调、 Mutation Observer API、queueMicrotask()等
❓ 那么事件循环对于两个队列的_优先级_是怎么样的呢?
1️⃣ ** main script中的代码优先执行(编写的顶层script代码)
2️⃣ 在执行任何一个宏任务之前(不是队列，是一个宏任务)，都会先查看微任务队列中是否有任务需要执行
⚠️ 也就是宏任务执行之前，必须保证微任务队列是空的;
⚠️ 如果不为空，那么就优先执行微任务队列中任务(回调);

面试题

Promise面试题

console.log("script start")

setTimeout(function () {
	console.log("setTimeout1");
	new Promise(function (resolve) {
		resolve();
	}).then(function () {
		new Promise(function (resolve) {
			resolve();
		}).then(function () {
			console.log("then4");
		});
		console.log("then2");
	});
});

new Promise(function (resolve) {
	console.log("promise1");
	resolve();
}).then(function () {
	console.log("then1");
});

setTimeout(function () {
	console.log("setTimeout2");
});

console.log(2);

queueMicrotask(() => {
	console.log("queueMicrotask1")
});

new Promise(function (resolve) {
	resolve();
}).then(function () {
	console.log("then3");
});

console.log("script end")

await面试题

async function async1 () {
  console.log('async1 start')
  await async2();  // await后续返回一个Promise, 那么会等待Promise有结果之后, 才会继续执行后续的代码

  console.log('async1 end') //加入微任务队列
}


async function async2 () {
  console.log('async2')
  // return undefined => Promise().resolve(undefined)
}

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 函数一定会返回一个 promise 对象。如果一个 async 函数的返回值看起来不是 promise，那么它将会被隐式地包装在一个 promise 中。
async 函数可能包含 0 个或者多个 await 表达式。await 表达式会暂停整个 async 函数的执行进程并出让其控制权，只有当其等待的基于 promise 的异步操作被兑现或被拒绝之后才会恢复进程。promise 的解决值会被当作该 await 表达式的返回值。使用 async/await 关键字就可以在异步代码中使用普通的 try/catch 代码块。