页面卡顿

什么是页面卡顿（假死）

UI 阻塞

UI阻塞的原因分析

浏览器有GUI渲染线程和JS引擎，这两个线程是互斥的关系，JS引擎线程优先级高于GUI渲染线程。当JS引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中，等到JS引擎空闲时，立即被执行。

如果JS代码执行时间太长，例如进行大量的计算，就会导致JS引擎长时间占用主线程，GUI的更新会被放入队列，等待JS引擎空闲后再执行

事件循环和浏览器渲染的先后顺序

事件循环详细流程

事件循环是 JavaScript 异步编程的核心机制，它决定了代码的执行顺序：

执行顺序

1. 同步代码执行 - 立即执行
2. 微任务队列 - Promise.then、queueMicrotask 等
3. 宏任务队列 - setTimeout、setInterval、I/O 操作等
4. 浏览器渲染 - 重排、重绘、合成

关键特点

• 微任务优先级高于宏任务
• 每个宏任务执行完后，会清空所有微任务
• 浏览器渲染在宏任务之间进行
• 长时间运行的 JS 会阻塞渲染