背景

首先描述一下我们的业务场景：

1. 实时的接收码率在 20000kpbs 以上的视频数据在网页端实时的做解码、渲染。
2. 实时的播放音频。
3. 实时给服务端发送上行操控消息（键鼠、touch 操控信号是比较频繁的）。
4. 音视频解包以及弱网优化都在一个 WASM 模块处理。

问题

初期的架构如上图所示，音频数据 10ms 处理一次，60 帧的视频数据 16.66ms 左右处理一次，每次处理都会经过 WASM 进行计算、在主线程和其他线程之间频繁的调度 postMessage，性能是比较好的设备计算都是在微秒级的基本没有什么阻塞，但是 CPU 比较差的电脑、手机设备时会由于主线程阻塞导致严重的丢帧。

优化

单独把音视频处理线程提出来，并使用 MessageChannel 来进行线程间的通信，减少了主线程中转 postMessage 对主线程的压力，同时避免主线程阻塞对音视频的影响（实测拖拽窗口大小、打开｜关闭控制台会阻塞主线程），如下图所示：

最终效果

如下图对比，优化后主线程空闲的比例由 26% 提升到了 62%，实际体验 丢帧 减少很多，视频更加平滑。

（较差的Android机）优化前主线程的占用：

（较差的Android机）优化后主线程的占用：

TODO

调研 SharedArrayBuffer