《浏览器主线程很昂贵：高性能前端优化实战指南》

标签：
#前端 #Web性能 #浏览器原理 #JavaScript #渲染管线 #WebWorker #动画优化 #交互优化 #性能调优

总结：

本文深入剖析了浏览器主线程作为稀缺资源的工作原理，指出前端性能问题的根源往往不是代码速度慢，而是主线程被长时间占用导致界面冻结。文章系统性地介绍了两大类优化策略：在主线程上"精打细算"（拆分、批处理、优先级排序、延迟执行），以及"完全不用主线程"（利用合成器线程、Web Worker、消除不必要的工作），并通过大量交互式 Demo 帮助读者直观理解每种技术的实际效果。

文章要点：

1. 主线程是性能瓶颈的核心：主线程同时负责运行 JavaScript、样式计算、布局、绘制和事件处理，所有工作排队串行执行。60Hz 屏幕每帧预算约 16.6ms，实际可用仅约 10ms，超过 50ms 的任务会导致界面卡顿。

2. 拆分（Splitting）：将大任务切割成小片段，通过 setTimeout 或 requestAnimationFrame 让出主线程，让浏览器在间隙处理渲染和输入。注意过度拆分会产生额外开销，且 JSON.parse 等原子操作无法拆分。

3. 批处理（Batching）：将频繁触发的事件（如滚动、输入）合并执行，使用防抖（debounce）和节流（throttle）减少重复劳动。React 的虚拟 DOM 本质上也是一种批处理机制。

4. 优先级排序（Prioritizing）：通过自定义队列（基于 MessageChannel）实现任务插队机制，确保用户当前关注的操作（如点击预览图片）优先执行，采用"空闲时预处理，紧急时优先处理"的策略。

5. 延迟执行（Deferring）：非必要工作延后处理，包括代码分割、使用 IntersectionObserver 实现虚拟列表（只渲染可视区域内容）、离屏时暂停动画等，避免一次性处理全部数据。

6. 利用合成器线程：使用 transform 和 opacity 代替 top、left、width 等触发布局的属性做动画，让动画在合成器线程运行，即使主线程繁忙也能保持流畅。

7. FLIP 动画技术：对于必须改变布局的动画（如列表重排），先测量初始和最终位置，通过反转和播放 transform 来实现平滑过渡，将布局计算限制为仅一次，动画过程交给合成器。

8. Web Worker 处理重计算：将图片处理、大数据解析等纯计算任务转移到 Worker 线程，通过 postMessage 的 Transferable 对象（如 ArrayBuffer）实现零拷贝数据传输，避免主线程冻结。

9. 消除不必要的工作：当数据流入速度超过处理能力时，采用丢弃（旧日志）、合并（只保留最新值）、跳过（缓存 memoization）三种策略，从源头减少工作量。

10. 避免布局抖动（Layout Thrashing）：不要交替读写布局属性（如 offsetWidth），应先批量读取再批量写入，强制浏览器反复计算布局会严重阻塞主线程。

URL：
https://kciter.so/posts/the-expensive-main-thread/en/

kciter.so

The Browser's Main Thread Is Expensive | kciter.so

What comes to mind when you hear "frontend optimization"? For most of us it's things like reducing network requests, shrinking the bundle,…