MessageChannel 如何实现时间切片

一、MessageChannel 实现时间切片的核心原理3句话浏览器渲染是每帧 16msJS 不能霸占主线程太久否则卡顿。MessageChannel 能快速产生一个宏任务比setTimeout更快、更稳。每执行 5ms 就主动暂停通过宏任务让出主线程让浏览器渲染然后再继续。这就是时间切片Time Slicing。二、我给你封装终极通用切片方法直接复制用这个方法接收一个大任务自动分片每片5ms不阻塞页面。/** * 基于 MessageChannel 的时间切片工具 * param {Function} taskFn 每次执行一小步的函数return true 表示全部完成 * param {Function} onFinish 完成回调 */functionuseTimeSlice(taskFn,onFinish){letisStopfalse;constchannelnewMessageChannel();constport1channel.port1;constport2channel.port2;functionrunSlice(){if(isStop)return;conststartperformance.now();while(performance.now()-start5){constfinishedtaskFn();if(finished){onFinish?.();return;}}port1.postMessage(null);}port2.onmessagerunSlice;runSlice();// 返回清理方法return(){isStoptrue;port2.onmessagenull;port1.close();port2.close();};}---三、使用示例超级简单你有一个巨量循环任务直接用leti0;consttotal100000;// 超大任务// 直接使用conststopTaskuseTimeSlice(// 每一步小任务(){console.log(执行,i);i;returnitotal;// 做完返回 true},// 完成回调(){console.log(✅ 全部完成);});// 想停就停// stopTask()在 React 里使用useEffect((){conststopuseTimeSlice(...,...);returnstop;// 卸载自动清理},[]);四、这个方法到底做了什么你的大循环不会一次执行完每 5ms 自动切一刀时间到自动暂停让浏览器去渲染页面渲染完立刻继续页面永远不卡顿这就是React 内部做时间切片的方式。五、面试标准答案背会MessageChannel 实现时间切片的原理使用MessageChannel创建快速宏任务比setTimeout更快更稳定。通过performance.now()计算执行时间。每执行 5ms 就主动暂停让出主线程。通过postMessage触发下一轮任务实现可中断、可恢复。最终达到大任务分片执行不阻塞渲染的效果。六、你只要记住一句话MessageChannel 负责快速调度5ms 负责控制时间片两者结合 完美时间切片就是 React Scheduler 核心。