浏览器的主线程很昂贵
来源：kciter.so · 302 分
📋 概述
一篇系统讲解浏览器主线程的前端优化长文。它指出大部分卡顿并非代码慢，而是“恰好由代码占住了主线程”：渲染、事件、网络回调与框架内部几乎都挤在同一条线程上。文章给出了精打细算主线程的四种内部手法——拆分、批处理、优先级与延迟——以及把工作挪出主线程的几种外部方案，如交给合成器或 Web Worker。
🔑 核心要点
- JS 运行与屏幕绘制都挤在同一条主线程上，一次 200ms 的函数即可冻结整屏。
- 60Hz 屏每帧预算约 10ms，超过 50ms 的任务即被视为长任务问题。
- 内部手法包括拆分长任务、批处理高频工作、区分优先级与推迟非紧要任务。
- 外部思路是把工作交给合成器或 Worker，甚至直接消除该工作。
- INP 与 TBT 等性能指标本质都在衡量主线程被阻塞了多久。
💡 金句
代码并不慢，它只是恰好是那一段占着主线程的代码——而占住主线程，就等于冻结了屏幕。
👍 0
👎 0
← 返回 Hacker News 首页