JavaScript variable size

Question

Of interest, is it possible to determine the size of a JavaScript variable in bytes?

I have a web application that works fine on the desktop, but blows up * on the iPad. I assume that iPad Safari has much less memory, but I would like to get an idea of ​​what is going on in my application.

I can estimate the relative sizes based on the size of the JSON source, but it's even better to find out the actual size of the serialized object

• "Blows up" = Safari slows down, then the screen turns black and I return to the standard iPad screen. Whatever it is called. It seems like Safari has run out of memory allocated for the browser instance.

Answer 1

This will not directly answer your question. The reference to the JS language does not indicate how to store the data, so up to the groups performing the implementation, in this case the WebKit command, and I did not see anything public about it. I definitely haven't seen anything about implementing WebKit for Mobile Safari.

I would say that on a desktop computer it really can’t work perfectly, just the speed and size of the desktop mask the “problems” that appear on mobile devices. In iOS, the browser instance has a ceiling of 10 MB, in which you can work, if I remember correctly, although in practice you start to hit the wall about 6 or 7 MB. On the PC, when you run out of RAM, the computer just simply unloads the unused memory to disk. On iOS, either the resources stop loading (for example, images), or the browser just quits (this is probably what you are experiencing).

If you have a Mac, you can watch Safari to learn how to do this with a tool called "Tools" (this is part of the iOS SDK). If you don’t have a Mac or don’t want to download the SDK, just open a blank instance of Safari, open the Windows Task Manager or the Mac Activity Monitor and see how your memory usage changes when loading your web application.

Staying at a 6MB window is annoying. The most important thing is not to create new images. For example, this pattern is a huge problem on the iPhone:

 function placeImage(imagename,targetelement) { var image = new Image(); image.src = imagename; targetelement.appendChild(image); } 

In this case, even if you delete the image from the DOM, and even if the image is within placeImage , it will never be released, and it is just a matter of time before this application crashes the browser. If this is your case, think about how many images you need to display at once, create image objects only for these elements and recycle them (just reset src anytime you want a new image).

In addition, I found that the JavaScript application stack is much smaller than on a desktop browser, so if you have a lot of recursion, you will see the problem much faster on iOS. A way to identify this problem is to open the developer tools in Safari and use the profiler to find out which features are calling the most.

[edit] I can’t remember if this is an exact technique that reveals how numbers are stored differently inside webkit, but I think so. Basically, you are pretending to be a million random numbers, first with a float, then (if you uncomment the string) an integer, and then a large integer. I am poorly versed in typed languages, so I’m not quite sure what this proves, in addition to the fact that internal numbers are processed differently depending on their smallest possible representation.

 arrTarget = []; for (var i = 0; i < 1000000; i++) { arrTarget.push(Math.random() * 16000000); // arrTarget.push(Math.floor(Math.random() * 16000000)); // arrTarget.push(Math.floor(Math.random() * 1600000000000)); } // Time how long it takes to sort the array: var time = new Date().getTime(); arrTarget.sort(); console.log(new Date().getTime() - time); 

Answer 2

This is not something you can do as a whole, but the sizes of some JavaScript objects are not implementation specific, so you have some guarantees:

• "A string value is a member of type String and is a finite ordered sequence of zero or more 16-bit unsigned integers."
• "The Number type is a set of values ​​representing numbers. In ECMAScript, the set of values ​​represents double-precision IEEE 754 64-bit values, including special Not-a-Number (NaN) values, positive infinity, and negative infinity."

A source