Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you about how much memory the JavaScript array takes up in Chrome. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

Because my (original author) code uses a lot of memory, I take a look at how much memory strings, objects, numbers, and arrays take up.

The results are as follows:

I think the biggest challenge with this data is that empty arrays or empty lists take up too little memory.

So I created a lot of empty lists instead of reusing the same empty lists every time.

-Total size MB the size ByteEmpty Fields7.638.00Booleans9.279.72Numbers9.279.72Identical Strings9.279.72Arrays39.7941.72Empty Objects62.6865.72 of each item

I don't fully understand these results. They depend on the internal structure of the JavaScript engine.

The size of the empty field makes sense. Each item takes up exactly 8 bytes. The entire array actually takes up 8000048 bytes, so 48 bytes are the overhead of the array itself. )

However, the array of numbers does not meet my expectations. JavaScript uses double-precision (64-bit) floating point numbers. 64 bits are 8 bytes, but each number takes up an average of 9.7 bytes.

Similarly, Chrome displays the size of each empty array as 32 bytes and the size of each empty object as 56 bytes. However, the average size of the entire array is 39.8 and 62.7, respectively.

I suspect that part of the reason for this difference is that V8 stores metadata for array items (such as type information), and that Chrome provides more space for arrays than the actual minimum required. In addition, not all arrays are the same within V8. This blog post in 2011 (value representation in javascript implementations) is also very good.

(translation note: I will have time to write another article on the internal storage principle of V8 array later, by justjavac)

/ / Inheritance hierarchy://-Object//-Smi (immediate small integer) / /-HeapObject (superclass for everything allocated in the heap) / /-JSReceiver (suitable for property access) / /-JSObject//-JSArray//-JSArrayBuffer//-JSArrayBufferView//-JSTypedArray

If you want to use a memory analyzer (Profiler) in Chrome, you can use this CodePen or get the code from Github.

It's also interesting to see what the table looks like with only item in each array:

-Array Total size Empty Field56Boolean184Number184String216Array216Empty Object240

The translation is over.

Add some related knowledge points about the use of Chrome memory Analyzer (Profiler).

When we use a memory analyzer, we first create a clean environment, and we can choose stealth mode or guest mode when creating a new tab. The more advanced use is to create a new Chrome desktop shortcut and configure the relevant command line parameters.

If you look at the previous article, when it mentioned "Open Profiles Panel", you may not find this panel in your Chrome because Profiles has been renamed and is now the Memory panel.

In the Memory panel, select Take Heap Snapshot to make a snapshot of the heap memory. The Google developer Center has a very good article (available in Chinese), "how to take a heap snapshot": https://developers.google.com/web/tools/chrome-devtools/memory-problems/heap-snapshots

This is how much memory the JavaScript array takes up in Chrome. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.