进程-线程

线程和进程是操作系统中的两个概念：

进程（process）：计算机已经运行的程序，是操作系统管理程序的一种方式；可以理解成启动一个应用程序，就会默认启动一个进程（也可能是多个进程）；
线程（thread）：操作系统能够运行运算调度的最小单位，通常情况下它被包含在进程中；可以理解为每一个进程中，都会启动至少一个线程用来执行程序中的代码，这个线程被称之为主线程； 因此可以认为进程是线程的容器；

浏览器中的JavaScript线程

我们经常会说JavaScript是单线程的，但是JavaScript的线程应该有自己的容器进程：浏览器或者Node。
目前大多数的浏览器其实都是多进程的，当我们打开一个tab页面时就会开启一个新的进程，这是为了防止一个页面卡死而造成所有页面无法响应，整个浏览器需要强制退出；每个进程中又有很多的线程，其中包括执行JavaScript代码的线程；

JavaScript的代码执行是在一个单独的线程中执行的：这就意味着JavaScript的代码，在同一个时刻只能做一件事；如果这件事是非常耗时的，就意味着当前的线程就会被阻塞；所以真正耗时的操作，实际上并不是由JavaScript线程在执行的：浏览器的每个进程是多线程的，那么其他线程可以来完成这个耗时的操作；比如网络请求、定时器，我们只需要在特性的时候执行应该有的回调即可；

浏览器的事件循环

JavaScript线程依次执行代码，当遇到异步代码时就会将这些代码交给浏览器的其他线程执行这些异步耗时代码，JS线程只执行同步代码，当异步代码在浏览器其他线程中执行完后就会将其回调函数移入事件队列中，JS线程会来到事件队列中依次取出执行。事件队列里面的回调函数遵循先进先出的规则。但是事件队列细分为宏任务队列和微任务队列。

宏任务-微任务

事件循环中并非只维护着一个队列，事实上是有两个队列：

宏任务队列（macrotask queue）：ajax、setTimeout、setInterval、DOM监听、UI Rendering等
微任务队列（microtask queue）：Promise的then回调、 Mutation Observer API、queueMicrotask()等

那么事件循环对于两个队列的优先级是怎么样的呢？

main script中的代码优先执行（编写的顶层script代码）；
在执行任何一个宏任务之前（不是队列，是一个宏任务），都会先查看微任务队列中是否有任务需要执行

也就是宏任务执行之前，必须保证微任务队列是空的；如果不为空，那么就优先执行微任务队列中的任务（回调）；

测试题

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");
});

// promise1
// 2
// then1
// queueMicrotask1
// then3
// setTimeout1
// then2
// then4
// setTimeout2

// async function bar() {
//   console.log("22222")
//   return new Promise((resolve) => {
//     resolve()
//   })
// }

// async function foo() {
//   console.log("111111")

//   await bar()

//   console.log("33333")
// }

// foo()
// console.log("444444")


async function async1 () {
  console.log('async1 start')
  await async2();
  console.log('async1 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')

// script start
// async1 start
// async2
// promise1
// script end
// async1 end
// promise2
// setTimeout

进程-线程，浏览器的事件循环（EventLoop）

进程-线程

浏览器中的JavaScript线程

浏览器的事件循环

宏任务-微任务

测试题