事件循环

2026 年 1 月 26 日 星期一(已编辑)
/ ,
19
2

事件循环

知识点串联

浏览器渲染进程工作原理 -> 异步 -> 事件循环 -> J事件循环下的宏任务微任务和同步代码的执行顺序

浏览器的工作机理

浏览器是一个多进程多线程复杂应用，其中最复杂的进程有：

  • 浏览器进程： 是浏览器中最主要的进程，其他的进程都由浏览器进程调控，主要负责界面显示、用户交互、子进程管理。浏览器进程内会启动多个线程来处理不同的任务。
  • 网络进程：负责加载网络资源，网络进程启动多个线程来处理不同的网络任务。
  • 渲染进程: 目前的主流策略，浏览器会为每一个标签页开启一个渲染进程，在进程中启用一个渲染主线程来执行HTML、CSS、JS代码。

渲染进程工作内容

渲染主线程是浏览器中最繁忙的线程，需要它处理的工作包括但不限于：

  • 解析HTML
  • 解析CSS
  • 计算样式
  • 布局
  • 处理图层
  • 每秒刷新页面60次
  • 执行全局JS代码
  • 执行事件处理函数
  • 执行计时器的回调函数

何为异步？

代码在执行过程中，会遇到一些无法立即处理的任务，比如：

  • 计时完成后需要执行的任务 —— setTimeout、setInterval
  • 网络通信完成后需要执行的任务 -- XHR、Fetch
  • 用户操作后需要执行的任务 -- addEventListener

如果让渲染主线程等待这些任务的时机达到，就会导致主线程长期处于「阻塞」的状态，从而导致浏览器「卡死」

image-20220810104344296
image-20220810104344296

如何理解JS异步

JS本身是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而浏览器的渲染主线程对于每一个标签页只有一个。浏览器的渲染主线程承担着诸多工作，如解析HTML、解析CSS、计算样式、布局、处理图层、控制每秒刷新的次数、执行JS代码等等。

就拿最简单的时间函数来说，如果采用同步的方式，就会导致主线程产生阻塞，从而导致消息队列中的其他任务无法得到执行，这样一来，一方面导致繁忙的主线程白白的消耗时间，另一方面在阻塞的同时整个页面也会无法更新，给用户造成卡死的体感现象。

所以浏览器采用了异步的方式来避免。具体的做法是，当某些任务发生时，比如计时器、网络、或监听事件，主线程将在其他线程进行注册，自身则立即结束这个任务的执行，转而去执行后续的代码或任务。当其他线程完成时，将事先传递的回调函数包装成任务，加入主渲染线程消息队列的末尾排队，等待待用执行。

在这种异步处理策略下，浏览器永不阻塞，从而最大的保证了单线程的流畅运行。

阐述一下 JS 的事件循环

事件循环又叫消息循环，是浏览器渲染主进程的一种工作方式。 在 Chrome 的源码中，它会开启一个不会结束的 for 循环，每次循环都从消息队列中取出第一个任务执行，其他的线程只需要在合适的时机将任务添加到此队列中即可。

过去把消息队列简单分为宏队列和微队列，这种说法目前已经无法描述目前浏览器复杂的环境，根据 W3C 官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。不同任务队列有不同的优先级，在一次事件循环中，由浏览器自行决定取哪一个队列的任务。但浏览器必须有一个微队列，微队列的任务一定具有最高的优先级，必须优先调度执行。

JS 中的计时器能做到精确计时吗？为什么？

不行，因为：

  1. 计算机硬件没有原子钟，无法做到精确计时
  2. 操作系统的计时函数本身就有少量偏差，由于 JS 的计时器最终调用的是操作系统的函数，也就携带了这些偏差
  3. 按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层，则会带有 4 毫秒的最少时间，这样在计时时间少于 4 毫秒时又带来了偏差
  4. 受事件循环的影响，计时器的回调函数只能在主线程空闲时运行，因此又带来了偏差

消息队列中任务的优先级

任务没有优先级，在消息队列中先进先出

但消息队列是有优先级的

根据 W3C 的最新解释:

JS 事件循环 / 宏任务微任务执行顺序题

铁律:

  • 同步代码立刻执行（函数声明、console、new Promise 里的代码都是同步）
  • 微任务后执行（Promise.then、await 后面的代码）
  • 宏任务最后执行（setTimeout、setInterval）

  • 永远的执行顺序: 同步代码 -> 微任务 ->宏任务

async function async1() {
  console.log('async1 start')
  await async2()
  console.log('async1 end')
}

async function async2() {
  console.log('async2')
}

console.log('script start')

setTimeout(() => {
  console.log('setTimeout')
}, 0)

async1()

new Promise(resolve => {
  console.log('Promise1')
  resolve()
}).then(() => {
  console.log('Promise2')
})

console.log('script end')

最终输出：
script start
async1 start
async2
Promise1
script end
async1 end
Promise2
setTimeout


console.log(1)

new Promise(resolve => {
  console.log(2)
  resolve()
}).then(() => {
  console.log(3)
  new Promise(resolve => {
    console.log(4)
    resolve()
  }).then(() => {
    console.log(5)
  })
}).then(() => {
  console.log(6)
})

console.log(7)

1 2 7 3 4 5 6

async function fn() {
  console.log(1)
  await new Promise(resolve => {
    console.log(2)
    resolve()
  })
  console.log(3)
}

console.log(4)

setTimeout(() => {
  console.log(5)
}, 0)

fn()

new Promise(resolve => {
  console.log(6)
  resolve()
}).then(() => {
  console.log(7)
})

console.log(8)

4 1 2 6 8 3 7 5

Promise.resolve().then(() => {
    console.log(0);
    return Promise.resolve(4);
}).then((res) => {
    console.log(res);
});

Promise.resolve().then(() => {
    console.log(1);
}).then(() => {
    console.log(2);
}).then(() => {
    console.log(3);
}).then(() => {
    console.log(5);
});

// 0,1,2,3,4,5

此题考察了 Promise.resolve() 的特殊情况，在resolve(Promise.resolve(4));和return Promise.resolve(4); 时不能直接同步执行，会额外附带两个微任务，因为V8引擎源码中需要经过拆包+传值。

参照原文: https://juejin.cn/post/6949699310732869669

const first = () => (new Promise((resolve, reject) => {
    console.log(3);
    let p = new Promise((resolve, reject) => {
        console.log(7);
        setTimeout(() => { 
            console.log(5);
            resolve(6); 
            console.log(p);
        }, 0);
        resolve(1); 
    });
    resolve(2); 
    p.then(arg => {
        console.log(arg); 
    });
}));

first().then((arg) => {
    console.log(arg); 
});

console.log(4);

输出：
3
7
4
1
2
5
Promise { 1 }

1. 同步执行阶段
执行 first()，进入外层 Promise 构造函数：
同步打印 3
同步创建内层 Promise p，进入其构造函数：
同步打印 7
setTimeout 回调放入宏任务队列
同步执行 resolve(1)，将 p 状态改为 fulfilled，值为 1
外层 Promise 同步执行 resolve(2)，将自身状态改为 fulfilled，值为 2
同步执行 p.then(...)，将其回调放入微任务队列
同步执行 console.log(4)，打印 4
2. 微任务队列执行
执行 p.then 回调：打印 1（p 的值是 1）
执行 first().then 回调：打印 2（外层 Promise 的值是 2）
3. 宏任务队列执行（setTimeout 回调）
打印 5
尝试 resolve(6)：此时 p 已经是 fulfilled 状态，此操作无效
打印 p：输出 Promise { 1 }（因为 p 早已 resolved 为 1）

let a;
let b = new Promise((resolve) => {
    console.log(1);
    setTimeout(() => { 
        resolve();
    }, 1000);
}).then(() => { 
    console.log(2);
});

a = new Promise(async (resolve) => {
    console.log(a); 
    await b;       
    console.log(a); 
    console.log(3);
    await a;       
    resolve(true);
    console.log(4);
});

console.log(5);

这种await题型应该先转换为promise方便阅读

let a;
let b = new Promise((resolve) => {
    console.log(1); 
    setTimeout(() => {
        resolve();
    }, 1000); 
}).then(() => { 
    console.log(2);
});

a = new Promise((resolve) => { 
    console.log(a);
    b.then(() => {
        console.log(a);
        console.log(3);
        a.then(() => { 
            resolve(true);
            console.log(4);
        });
    });
});

console.log(5);

输出： 1,a(undefined),5,"等待一秒",2, Promise{<pendding>},3

s

使用社交账号登录

  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...