Chrome 开发工具的 "show more" 显示不正确的大小

Question

我有一个创建大字符串的非常简单的脚本

window.big = '';
for(let c = 0; c < 12000; c++){
    window.big += 'L'
}

当我尝试 console.log 时，事情变得很奇怪。

window.big.length 是 12000，但是，当我尝试在 Chrome Dev Tools 中执行 console.log(window.big) 时，它显示 Show more (23.4 KB)，是原始大小的两倍多，这是 12000。

String.length 与字符的字节大小相比可能有所不同，但是，当您尝试这样做时，事情会变得有趣

var blob = new Blob([window.big], {type: 'application/octet-stream'});
window.open(window.URL.createObjectURL(blob));

显示大小为 12KB

在 Chrome OS、Chrome 版本 80.0.3987.162（官方构建）（64 位）

上复制了该问题

Answer 1

Chrome devtools 始终显示内部字符串的大小，该字符串按照 JavaScript 规范以 UTF-16 编码存储，因此每个字符占用两个字节。当您创建 Blob 时，它会将字符串存储为 UTF-8，其中 ASCII 字符（例如 L）仅占用一个字节。

已在 Chrome 83 中修复（参见 crbug.com/1024721）。现在 Chrome 使用 UTF-8 编码计算字符串的字节大小，因为它在网络中很普遍，所以现在 devtools 显示 12 kB 供您测试。

Chrome dev tools's "show more" shows incorrect size