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 OS，Chrome 版本 80.0.3987.162 (Official Build) (64-bit) 上復制了該問題

Answer 1

Chrome devtools 總是顯示內部字符串的大小，該字符串按照 JavaScript 規范以 UTF-16 編碼存儲，因此每個字符占用兩個字節。 當您創建Blob時，它將字符串存儲為 UTF-8 ，其中 ASCII 字符（例如L ）僅占用一個字節。

它已在 Chrome 83 中修復（請參閱crbug.com/1024721 ）。 現在 Chrome 使用 UTF-8 編碼計算字符串的字節大小，因為它在 web 中很普遍，所以現在 devtools 顯示 12 kB 用於您的測試。