窗口/标签非活跃时postMessage未接收的原因及解决方法

原因 #

• 浏览器后台节流优化：主流浏览器（Chrome、Firefox等）为节省系统资源，会对非活跃标签页的JavaScript执行做限制，包括降低JS线程优先级、延迟事件队列处理。postMessage的消息会被暂存到队列中，直到标签重新激活才会触发回调。
• 主线程休眠/降权：非活跃标签的主线程会被浏览器调至低优先级甚至进入休眠状态，导致绑定在主线程上的postMessage监听回调无法及时执行。

实现非活跃时接收消息的方法 #

• 用Web Worker接管消息接收逻辑：Web Worker运行在独立的后台线程，不受标签页活跃状态的节流限制。把postMessage的监听代码放到Worker中，就能实时接收iframe发来的消息。如果需要更新页面UI，Worker可以再向主线程发送消息，不过主线程的UI更新还是会等到标签激活后执行，但消息本身已经被处理。
• 剥离UI无关的处理逻辑：将不需要即时更新UI的业务逻辑（比如数据存储、计算）放在Worker中完成，避免依赖主线程的即时响应。
• 注：浏览器的节流开关（比如Chrome的chrome://flags/#disable-background-timer-throttling）仅适合调试，不能作为面向用户的解决方案。

可行性 #

完全可行，但要结合业务场景：

• 若仅需接收并处理消息（如数据记录、业务逻辑计算），Web Worker可以实现实时接收处理，不受标签状态影响。
• 若需要即时更新UI，由于非活跃标签的渲染机制限制，UI更新会延迟到标签激活后，但消息本身已经被接收和处理，不会丢失。

内容的提问来源于stack exchange，提问作者codaholic