前言

浏览器的主线程是单线程的。这代表着 JavaScript 执行、DOM 渲染、使用者交互事件处理，全都排在同一条队列里依次执行。当一段计算密集型代码占据主线程超过 50 ms，使用者就会感知到明显的卡顿——按钮点不动、滚动掉帧、输入无响应。你可能正因为这个问题而对页面性能失去信心。

这篇文章介绍两种主线程阻塞的武器：Web Worker和时间切片。它们思路截然不同，适用场景也不同。但目标一致：让主线程腾出手来响应使用者操作。

// 主线程阻塞时的表现
// 使用者点击 输入框 滚动页面
// | | |
// v v v
+---------------------------------------+
| JS 执行 |
| <-- 全部排队等待
+---------------------------------------+
|  渲染  | 事件回调  |  渲染  
|+---------+-----------+--------+
期望的效果:
+----+ +----+ +----+ +----+ +----+
|5ms |   |5ms |   |5ms |   |5ms |
<-- 任务被拆分
+----+ +----+ +----+ +----+
|    |    |    |
渲染    事件    渲染    事件
<-- 穿插执行

说到识别长任务。你的代码到底卡在哪

在动手调整之前，先要定位问题。否则你会陷入无尽地修改逻辑，却仍然看到 UI 卡顿。

Chrome Performance 面板

打开 DevTools → Performance → 录制一段操作。红色三角标记的是长任务，火焰图中可以看到调用栈，精确到哪一行代码耗时最长。

Long Task API

用代码自动检测长任务。适合在生产环境埋点上报：

// 监听长任务
const observer = new PerformanceObserver => {
for ) {
// entry.duration 是任务持续时间
if {
console.warn}ms`,{
从name来看，entry.name,startTime: entry.startTime,});// production environment 可以上报到监控网站
// reportLongTask;}
}
})，observer.observe;

一个典型的阻塞场景

假设需要对万条数据做过滤、排序、聚合，直接在主线程跑：

function processRecords: ProcessedResult {
// 步骤1: 过滤无效数据
const valid = records.filter => validateRecord);// 步骤2: 复杂排序
const sorted = valid.sort => complexCompare);// 步骤3: 分组聚合
const grouped = groupAndAggregate;// 总计 ~200ms，使用者界面完全冻结
return grouped;}

200 ms 的阻塞足以让使用者感到明显卡顿。

Web Worker：把计算搬到另一个线程

基本用法

Web Worker 在独立的线程中运行 JavaScript，不会阻塞主线程。

Main thread 和 Worker 间通过消息传递通信。

// worker.ts — 运行在独立线程
self.onmessage = => {
const { type,payload } = event.data;switch {
case "PROCESS_RECORDS": {
const result = processRecords;self.postMessage;break，}
// ...其他消息类型
}
};function processRecords: ProcessedResult {
const valid = records.filter => validateRecord);const sorted = valid.sort => complexCompare);return groupAndAggregate;}

// main.ts — 主线程
const worker = new Worker,{ type:"module"});worker.onmessage = => {
const { type,payload } = event.data;if { renderTable;} // 拿到结果后更新 UI
};worker.postMessage({
type这方面。"PROCESS_RECORDS",payload: records,});

TypeScript 类型安全的消息通信

裸用 postMessage 很容易传错数据。可以定义严格的消息类型：

// shared-types.ts — 主线程和 Worker 共用类型定义
interface Record { id:string;name:string，说起来，value:number;
怎么说呢，timestamp:number;}
interface ProcessedResult { groups:Map;total:number;average:number;}
type MainToWorkerMessage =
{ type:"PROCESS_RECORDS";按理说，payload:Array;}
| { type:"SORT_DATA";payload:{data:Array;field:keyof Record};}
| { type:"CANCEL";}，type WorkerToMainMessage =
{ type:"RESULT";payload:{result:Array;}，}
| { type:"PROGRESS";老实说，payload:{percent:number};}
| { type:"ERROR";payload:{message:string};}，

// typed-worker.ts
const ctx= self as unknown as DedicatedWorkerGlobalScope;ctx.onmessage==>{
const msg=event.data as MainToWorkerMessage;switch{
case 'PROCESS_RECORDS':
try{
const result=processRecords;ctx.postMessage;}catch{
ctx.postMessage.message}});其实，}
break，case 'CANCEL':
// cancel logic ...
break;}}
}，

Transferable Objects：零拷贝数据传输

<< 💩💩💩 >> 

• ❗️常见误区：ArrayBuffer 默认会结构化克隆，导致大量内存复制和 CPU 占用。