浏览器主线程很贵：前端优化的真正战场

概述

一篇系统讲解如何'善用浏览器主线程'的前端性能长文。绝大多数前端优化谈的是减少请求、压缩体积、利用缓存，但在互动密集、实时数据流动的页面上，一旦主线程被占满屏幕就会冻结——卡顿的本质常常不是代码慢，而是它恰好占据了主线程。主线程同时承担 JavaScript 执行与绘制（rAF→样式→布局→绘制）两大任务，两者排在同一线程上；60Hz 屏每帧预算约 16.6ms，扣除浏览器开销后实际约 10ms，一个超过 50ms 的长任务就足以造成可见卡顿（对应 INP/TBT 指标）。作者把优化分两大家族：在内部精打细算——splitting（切分并让出，如每 20 条让出一次、或按帧预算用 rAF 限时工作）、batching（防抖/节流，消除高频事件反复付固定成本）、prioritizing（优先级队列 + idle-until-urgent 模式，让被点中的任务插队）、deferring（代码分割、IntersectionObserver 惰性填充、content-visibility）；以及干脆不占主线程——把动画交给合成器（transform/opacity、FLIP 技巧，注意布局抖动）、把重计算送进 Web Worker（用 Transferable 零拷贝传数据）、以及消除工作本身（丢弃、合并、记忆化 skip）。全文配大量可交互 demo 说明各概念。