浏览器事件环

本节目标：理解“浏览器事件环”的核心思路，并能把它用于实际开发或面试表达。

说明：原 OneNote 中有图片引用，但图片未包含在导出目录中；本页保留了可用的文字与代码内容。

**1.****浏览器的进程**

每一个页卡都是进程 (互不影响)

浏览器也有一个主进程 (用户界面)

渲染进程 每个页卡里 都有一个渲染进程 (浏览器内核)

网络进程 （处理请求）

GPU进程 3d绘制

第三方插件的进程

**2.** **渲染进程（包含着多个线程）**

GUI渲染线程 （渲染页面的）

js引擎线程 他和页面渲染时互斥

事件触发线程 独立的线程 EventLoop：不会和js线程冲突，

事件 click、setTimeout、ajax也是一个独立线程

时间到了，事件触发了，网络请求有结果了，再把相应的回调函数放入任务队列之中，

**宏任务****,****微任务**

宏任务：宿主环境提供的异步方法 都是宏任务 script，ui 渲染

微任务：语言标准提供promise，mutationObserver

**4.****微任务和****GUI****渲染**
document.body.style.background = 'red';
console.log(1)
Promise.resolve().then(() => {
  console.log(2)
  document.body.style.background = 'yellow';
})
console.log(3);
微任务在执行完毕后，浏览器会检测是否需要重新渲染；
等GUI渲染完后，再从宏任务中取出任务执行；
每次循环一次都会执行一个宏任务，并清空对应的微任务队列，每次循环完毕后，都要看是否要渲染，如果需要渲染才渲染；
微任务中产生的微任务会在本轮事件循环中清空；

先宏任务->执行完所有微任务->看是否需要渲染->执行宏任务队列中的任务->反复如此；以上过程由eventloop线程控制；

**事件任务**
button.addEventListener('click', () => {
  console.log('listener1');
  Promise.resolve().then(() => console.log('micro task1'))
})
button.addEventListener('click', () => {
  console.log('listener2');
  Promise.resolve().then(() => console.log('micro task2'))
})
button.click(); // click1() click2()

# ** **6.****定时器任务
Promise.resolve().then(() => {
  console.log('Promise1')
  setTimeout(() => {
    console.log('setTimeout2')
  }, 0);
})
setTimeout(() => {
  console.log('setTimeout1');
  Promise.resolve().then(() => {
    console.log('Promise2')
  })
}, 0);

# ** **7.****任务执行面试题
console.log(1);async function async () {    console.log(2);    await console.log(3);    console.log(4)}setTimeout(() => {	console.log(5);}, 0);const promise = new Promise((resolve, reject) => {    console.log(6);    resolve(7)})promise.then(res => {	console.log(res)})async (); console.log(8);

> 来自

 <http://www.zhufengpeixun.com/jg-vue/node/async-2.html#_7-%E4%BB%BB%E5%8A%A1%E6%89%A7%E8%A1%8C%E9%9D%A2%E8%AF%95%E9%A2%98>

浏览器事件环 ​

浏览器事件环