今天聊聊，怎么让网页从"卡"变成"顺"。

流水线上的某个工人，一直干重活不休息，其他工人dou得等他手里的活干完才Neng继续。

JS 执行一次超过 50ms，主线程就被占着，其他任务dou要排队等着。

50ms 怎么来的？Google 认为 100ms 内响应用户操作，人感觉是"即时"的。所以任务Ru果超过 100ms 的一半，就会被人感知到卡顿。

// . 大量数据计算 const result = heavyCalculate // 数据处理 // . 复杂 DOM 操作 document.body.innerHTML = '' // 清空页面 for { document.body.appendChild) } // . 递归调用过深 function deepClone { return JSON.parse) // 深拷贝大对象 } 怎么拆？

. requestIdleCallback：让工人轮着休息

// 把大任务拆成小块，工人有空就干一点 function processItems { let index = 0 // 当前处理到第几个 function work { // deadline.timeRemaining 表示工人还有多少空闲时间 // 循环处理，每次只干一件，直到空闲时间用完或全部处理完 while > 0) { process index++ } // 还有剩下的活没干完？排到下次空闲再继续 if { requestIdleCallback // 还有活，队列里排着 } else { callback // 全部干完了通知调用方 } } // 第一次执行，排队等待工人空闲 requestIdleCallback }

说实话，requestIdleCallback 这个 API，用起来挺方便的，但兼容性嘛，你懂的。

. Web Worker：另开一条生产线

主线程生产线：只管接待客人 ↓ Worker 生产线：干重活 ↓ 主线程：接收结果，继续组装

// main.js const worker = new Worker worker.postMessage worker.onmessage = => { const result = e.data updateUI } // processor.js self.onmessage = => { const result = heavyCalculation self.postMessage } 合成层：重要产品的专用通道 什么是合成层？

有些重要产品，整条流水线走下来太慢了。工厂会开辟一条专用通道，跳过前面几步，直接到Zui后的打包工序。

浏览器也是这样。合成层就是某些元素的专用通道，跳过布局计算，直接合成到屏幕。

害，不是所有元素dou适合走合成层，这玩意儿也有副作用的。

不占用主线程Layout 和 Paint 在主线程，Composite 在 GPU

不影响其他元素普通元素重排可Neng影响整个车间，合成层互相独立

GPU 加速transform 和 opacity 直接由 GPU 处理，CPU 解放出来

. transform: translate/rotate/scale . opacity 有变化 . will-change 提前声明了 . position: fixed . video、canvas、iframe 等元素 用 will-change 申请专用通道

/* 提前跟工厂说：这个产品要走专用通道，提前准备 */ .box { will-change: transform; } 重排和重绘：流水线的返工

流水线上的产品，刚上完色又要改尺寸，刚改完尺寸又要换颜色——这就是返工。

重排 = 组装过程中发现尺寸不对，需要重新组装。

# 重排：尺寸结构变了像换了个零件div.style.width = '200px'# 重绘：只是外观变了像换了个颜色div.style.color = 'red'

咱就是说你得先检查一下是不是这些问题导致的。

用 transform 代替位置变化

# ❌ 改 left/top = 产品不停挪位置，一次次调整element.style.left = '100px' element.style.top = '100px'