解决 Firefox 下的 race 问题

我厂有几个产品，需要从后端获取大量的信息，为了让用户能够近乎实时的看到这些信息，大部分数据都是通过 WebSocket 发给前端。这些产品在 Chrome 下表现正常，但是在 Firefox 下经常把数据格式搞乱，最终渲染失败。

因为 Firefox DevTools 没法解析 WebSocket 数据，而且市场占有率比较低，所以我一直没有解决这个问题。前几天终于把最小可复现实例搞出来，正准备研究，结果同事已经修好了。

预览版的 Firefox 终于可以在 DevTools 里查看 WebSocket 每一帧的数据，所以她尝试看了一下，发现从解析二进制数据的角度来看，Firefox 应该没问题。于是又回到代码，发现了一个可能产生 race 的点：

if (data instanceof Blob) {
  data = await new Response(data).arrayBuffer();
}

因为服务器返回的数据是二进制，所以我需要进行一次转换，把它变成 ArrayBuffer，然后再通过 TextDecoder 转换成文本，然后处理。Response.arrayBuffer 返回的是 Promise，所以我就很自然的用 await，并且在 Chrome 上运行良好。

但是在 Firefox 里，某些帧会后发先完成转换，a b c 变成 a c b，于是数据格式错乱，无法正常解析。我怀疑 Chrome 并没有真的把这一步保留到用户，而是同时存了两份数据，这样转换的时候直接给出数据就好，所以是微任务，不走 Event loop，不会产生 race。而 Firefox 则是实时转换，所以是宏任务，所以出问题。

我尝试去翻了一下源码，无奈平时没看过，所以没能找到证据。如果有哪位同学刚好知道，可以在评论里告诉我。