Chrome开发者工具的“显示更多”显示大小不正确

Question

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

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

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

window.big.length是12000，但是，当我尝试在Chrome开发工具中进行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操作系统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。