第一课 JS事件循环详解

一、进程 

进程可以简单理解为，程序专属的内存空间。进程之间相互独立（就如QQ、微信等）。

二、线程

如果说进程是一个房间，那么线程就像房间里面干活的人。

开启进程之后就会有一个主线程，主线程结束，程序就结束了。

进程也可以开启多线程。

三、 浏览器进程模型

1.浏览器进程

负责界面显示、用户交互（监听用户事件）、子进程管理等。浏览器进程内部会启动多个线程处理不同的任务。

2.网络进程

加载网络资源。

3.渲染进程（重点）

渲染进程启动后，会开启一个渲染主线程，负责执行 HTML、CSS、JS 的执行。

渲染主线程的任务有哪些：

• 解析HTML
• 解析CSS
• 计算样式
• 布局
• 处理图层
• 执行JS代码
• ……

当一个任务还没有完成时，用户触发了另一个事件，浏览器怎么办？

排队！

任意线程可以随时向队列里添加任务，若主线程在休眠状态，则会被唤醒。

4.异步

如果我们只使用同步任务，那么运行任务时，主线程会等待这些任务的时机到达（例如setTimeout(fn,3000)），这会导致主线程阻塞等待计时完成，使主线程长期处于阻塞状态。

主线程承担着浏览器最重要的工作，不能使其处于阻塞！

为此提出了异步的方式。

 面试题：如何理解JS的异步？

参考答案：

• JS是一门单线程的语言，因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。
• 渲染主线程承担着很多工作，渲染页面、执行JS代码、解析HTML、解析CSS等。
• 使用同步的方式，可能导致主线程阻塞，导致消息队列的其他任务无法及时执行。如此，渲染主线程会浪费时间，同时页面也无法及时更新，造成浏览器卡死。
• 所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如定时器、网络、时间监听，渲染主线程将任务交给其他线程去执行，自身立即去执行后续代码。当其他线程完成时，将之前传递的回调函数包装程任务，加入到消息队列的末尾排队，等待主线程执行。
• 在这种模式下，浏览器不会阻塞，最大限度保证了浏览器的单线程流畅运行。

5.任务有优先级吗？

没有。

但消息队列（Message Queue）有优先级。

根据W3C的解释：

• 每个任务都有任务类型，同类型任务必须在同一个队列。一次时间循环中，浏览器会根据情况从不同队列中取出任务进行执行。
• 浏览器必须准备好一个微任务队列，微任务队列优先级最高，必须将其执行完才能执行其他任务。

随着浏览器复杂度的提高，W3C标准中不再使用宏任务队列的说法。

在目前的chrome中，至少包含以下队列：

• 延时队列：用于存放计时器到达后的回调任务，优先级 中
• 交互队列：用于存放用户操作后产生的事件处理任务，优先级 高
• 微队列：用于存放需要最快执行的任务，优先级 最高

//例题1

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

Promise.resolve().then(function () {
  console.log(2);
});

console.log(3);

//3
//2
//1

//例题2
setTimeout(function () {
  console.log(1);
}, 0);

function delay(duration) {
  var start = Date.now();
  while (Date.now() - start < duration) {}
}
delay(3000);
console.log(2);

//2
//1

面试题：传输一下JS的事件循环

参考答案：

• 事件循环又叫消息循环，是浏览器渲染主线程的工作方式。
• 在Chrome源码中，渲染进程会开启一个不会结束的for循环，这就是渲染主线程，每次循环从消息队列中取出一个任务执行，而其他线程只需要在合适的时机将任务加入队列末尾。
• 过去把任务队列分为宏任务和微任务，当前根据W3C的解释，任务本身具有不同的类型，同类型的任务必须在一个队列，不同的任务可以在不同队列。在一次事件循环中，浏览器会决定取哪一个队列中的任务放入主线程，微队列的优先级最高必须优先调度，其次是交互队列、延时队列。

面试题：JS中的计时器能做到精确计时吗

参考答案：

• 1.从物理上讲，只有原子钟才能精确计时；
• 2.操作系统的计时函数有误差，JS本身调用的也是操作系统的函数，所以会有偏差；
• 3.根据W3C标准，超过五层setTimeout的嵌套会默认4ms延迟；
• 4.根据时间循环的原理，计时器的回调函数只能在主线程空闲时运行，会造成误差；

一个比较复杂的异步输出的题：先自己思考

new Promise((resolve, reject) => {
  console.log("A");
  setTimeout(() => {
    console.log("B");
  }, 0);
  console.log("C");
  resolve();
  console.log("D");
})
  .then(() => {
    console.log("E");
    new Promise((resolve, reject) => {
      console.log("F");
      resolve();
      console.log("G");
    })
      .then(() => {
        setTimeout(() => {
          console.log("H");
        }, 0);
        console.log("I");
      })
      .then(() => {
        console.log("J");
      });
  })
  .then(() => {
    console.log("K");
  });

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

new Promise((resolve, reject) => {
  console.log("M");
  resolve();
}).then(() => {
  setTimeout(() => {
    new Promise((resolve, reject) => {
      console.log("N");
      resolve();
    })
      .then(() => {
        setTimeout(() => {
          console.log("O");
        }, 0);
      })
      .then(() => {
        console.log("P");
      });
  }, 0);
});

console.log("Q");













//答案
A
C
D
M
Q
E
F
G
I
K
J
B
L
N
P
H
O

需要解析来找我