I was just wondering how the overhead is on a function object.
In an OOP design model, you can spawn up a lot of objects each with their own private functions, but in the case where you have 10,000+, these private function objects, I assume, can make for a lot of overhead.
I'm wondering if there are cases where it would be advantageous enough to move these functions to a utility class or external manager to save the memory taken up by these function objects.
This is how Chrome handles functions, and other engines may do different things.
Let's look at this code:
var funcs = [];
for (var i = 0; i < 1000; i++) {
funcs.push(function f() {
return 1;
});
}
for (var i = 0; i < 1000; i++) {
funcs[0]();
}
Now, the engine creates 1000 functions.
The individual function itself takes up almost no memory at all (36 bytes in this case), since it merely holds a pointer to a so-called SharedFunctionInfo object, which is basically a reference to the function definition in your source code*. This is called lazy parsing.
Only when you run it frequently does the JIT kick in, and creates a compiled version of the function, which requires more memory. So, funcs[0] takes up 256 bytes in the end:
*) This is not exactly true. It also holds scope information and the function's name and other metadata, which is why it has a size of 592 bytes in this case.
funcs[1] run the same compiled code or does it need to get compiled on its own)?
funcs[1] a 1000 times (while funcs[0]'s compiled version is cached), then the analyzer shows that funcs[1] is getting added a reference to funcs[0] (not directly to the compiled version). Not sure how that works, but looks like there's some magic involved there
First of all, it's common to place methods in the object constructor prototype, so they'll be shared among all instances of a given object:
function MyObject() {
....
}
MyObject.prototype.do_this = function() {
...
}
MyObject.prototype.do_that = function() {
...
}
Also note that a "function object" is a constant code-only block or a closure; in both cases the size is not related to the code:
x = [];
for (var i=0; i<1000; i++) {
x.push(function(){ ... });
}
The size of each element of the array is not going to depend on the code size, because the code itself will be shared between all of the function object instances. Some memory will be required for each of the 1000 instances, but it would be roughly the same amount required by other objects like strings or arrays and not related to how much code is present inside the function.
Things would be different if you create functions using JavaScript's eval: In that case I'd expect each function to take quite a bit and proportional to code size unless some super-smart caching and sharing is done also at this level.
for(var i=0; i<1000; i++){ x.push((function(i){return function(){alert(i)}}))(i)); } where each closure would reference a different i variable.
Function objects do in fact take up a lot of space. Objects themselves may not take up much room as shown below but Function objects seem to take up considerably more. In order to test this, I used Function("return 2;") in order to create an array of anonymous functions.
The result was as implied by the OP. That these do in fact take up space.
Created
100,000 of these Function()'s created caused 75.4 MB to be used, from 0. I ran this test in a more controlled environment. This conversion is a little more obvious, where it indicates that each function object is going to consume 754 bytes. And these are empty. Larger function objects may surpass 1kb which will become significant very quickly. Spinning up the 75MB was non trivial on the client, and caused a near 4 second lock of the UI.
Here is the script I used to create the function objects:
fs = [];
for(var i = 0; i < 100000; i++ ){
fs.push(Function("return 2;"));
}
Calling these functions also affects memory levels. Calling the functions added an additional 34MB of memory use.
Called
This is what I used to call them:
for( var i = 0; i < fs.length; i++ ){
for( var a = 0; a < 1000; a++ ){
fs[i]();
}
}
Using jsfiddle in edit mode is hard to get accurate results, I would suggest embedding it.
These statements are incorrect, I left them to allow the comments to retain context.
Function objects don't take very much space at all. The operating system and memory available are going to be what decides in the end how this memory is managed. This is not going to really impact anything on a scale which you should be worried about.
When loaded on my computer, a relatively blank jsfiddle consumed 5.4MB of memory. After creating 100,000 function objects it jumped to 7.5MB. This seems to be an insignificant amount of memory per function object (the implication being 21 bytes per function object: 7.5M-5.4M / 100k).
x = function(){...}; x.foo = [];a no-no and ECMA docs are for me as readable as an encrypted file.