0

I have a really simple script that creates a large string

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

Things get weird when I try to console.log it.

window.big.length is 12000, however, when I try to do console.log(window.big) in Chrome Dev Tools, it says Show more (23.4 KB), more than double the original size, which was 12000.

String.length may be different compared to the byte size of the characters, however, things get interesting when you try to do

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

which showed a size of 12KB

Replicated the issue on Chrome OS, Chrome Version 80.0.3987.162 (Official Build) (64-bit)

Picture of chrome dev tools issue Picture of downloaded file size

Binary
  • 451
  • 5
  • 15
  • 1
    Why do you think the amount of letters has any correlation to the "byte size" of the string\? – nbokmans May 22 '20 at 15:05
  • because the downloaded blob size is around 12KBs – Binary May 22 '20 at 15:10
  • I don't see how this is a duplicate. This provides insight into the differences between Blob and javascript string and people who have this kind of question don't expect to know first hand that it is related to the byte size differences of Blob and javascript @wOxxOm – Binary May 22 '20 at 15:14
  • may you post that as the answer? thank you for your time and help – Binary May 22 '20 at 15:18

1 Answers1

1

Chrome devtools has always shown the size of the internal string which is stored in UTF-16 encoding per JavaScript specification so each character occupies two bytes. When you create a Blob it stores strings as UTF-8 where ASCII characters (such as L) occupy only one byte.

It was fixed in Chrome 83 (see crbug.com/1024721). Now Chrome counts byte size of a string using UTF-8 encoding as it's prevalent in the web so now devtools shows 12 kB for your test.

wOxxOm
  • 65,848
  • 11
  • 132
  • 136