javascript - JSON increases Float32Array buffer size many folds when sending through websocket

Question

I got a strange experience. When I send data of this arraybuffer setting:

var f32s = Float32Array(2048);
for (var i = 0; i < f32s.length; i++) {
    f32s[i] = buffer[i]; // fill the array
    ws.send(f32s[i]);
}

The buffer size I got at the other end is 8192 bytes. But when I send chunck of buffer in JSON format like bellow:

var obj = {
    buffer_id: 4,
    data: f32s[i]
};
var json = JSON.stringify({ type:'buffer', data: obj });            
ws.send(json);

The buffer size I got at the other end bloat to 55,xxx bytes with data filled in and 17,xxx bytes with no data filled.

Why this happen and how do I keep the buffer size low? I want to do this because the stream is choppy when I render it at the other end.

Thank you.

Answer 1

我预计会发生这种情况，因为浮点 32 数组在数据结构中每个数字都需要 32 位，但是作为 ascii 格式的 json 表示每个数字都有一个严重的 8 位字符，然后是另一个 8 位的逗号，可能又是十进制并再次用于分隔空格。

因此[0.1234545, 111.3242, 523.12341]，例如数据需要 3 * 32 => 96 位才能在 float32array 中表示，但作为 json 字符串，此示例中的 32 个字符中的每个字符需要 8 位，即 256 位。