JavaScript: the delete operator creates a leak !?
Hello, I want to tell you about the history of insidious leakage, and about the great misunderstanding.
In fact, everything is very simple, such a seemingly ordinary line of code that, under certain conditions, can cause a leak:
But, I repeat only in certain conditions. One more thing, for the time being, it is not exactly known whether this is a browser bug or a JS feature.
Google said nothing to me about this. Digging into the ECMAScript specification also did nothing, because it is difficult to understand in a sober state. Actually this was the reason for writing this article.
So, I started working on project X, for one firm Y. They needed a management system for the firm, employees, etc., all in one package. The whole thing had to work through the browser. It was decided to write this miracle on JS. The specificity of the application is such that the tab could be open all day, and actively used. Therefore, we fought for every kilobyte of memory and every millisecond of CPU time. The frameworks didn’t cope with this task, and I had to write my bikes, and then miracles began!
After the next portion of the finished piece of the application, testing began, and oh God, the application slowly eats memory and does not want to stop. And in all browsers polls. For Fox, the most fatal outcome is that closing the tab does not help, and the memory remains eaten. At first, I sinned on my bike, but after a while I got to the bottom of the truth and realized that it was all about the delete operator.
')
At first, I was "delighted" that I found another bug browser. But then he was tormented by doubts, because it can’t be such that all browsers polls run. Yes, and in large frameworks, the delete operator is very actively used.
Therefore, I began to compromise a leak in jQuery, I suffered for a couple of hours, but there was no leakage. What is the matter, looked into the jQuery code and did not find any magic there. Well, okay, I thought, I created a new file, made a prototype of the function where there is a leak, and began to deal with obscenities with it.
Screen leakage:
On the screen you can clearly see that at the moment of deletion of objects, the memory is somehow otzhiraetsya, but then released to its previous state. But still, the memory allocated for objects that have been deleted has not been cleared.
At the same time, the delete operator behaves quite normally, does not swear and does not scream, objects seem to be deleted and everything is normal, but the memory occupied by them is not released.
Some time later, I realized that everything is quite simple, and the leakage can be avoided, but I will have to rebuild the code a little.
The memory is cleared if you do this:
The changes are certainly not so complex, and they did not greatly influence the architecture of my bike, but it was very unexpected and annoying that the first option created a leak.
Immediately make a reservation that the cause of the leak is not scopes, not contexts, not indices, not the names of the parameters - I checked it all.
So, I kind of fixed the leak, and all is well, life is good. But I still suffer a lot of questions:
What is the fundamental difference between the first version of the function and the second?
And is it a feature or a browser bug?
If a feature, then why is this feature not described in any manner of JS?
If a browser bug, then why so many years later is it still there?
Maybe someone already knows about it, but is silent?
I hope my article will help someone! And I think you should check your bikes for such leaks!
PS: Thank you all for your attention !!!
UPDATE 1:
Wrote about this so far in the Mozilla bugtracker, let's see what they say.
UPDATE 2:
So, the situation has cleared up, thanks for this huge mraleph and seriyPS , in their comments, everything is described in detail. # comment_5107501 , # comment_5107585 , # comment_5107692 , Mavim also describes my particular case in detail .
All questions received clear answers, this is not the magic of JavaScript, not a leak and not a browser bug, this is a feature of the implementation of the operator delete. And rather, it can be called redundant use of memory, and I just stepped on such a mine. But now we know the enemy by sight and get rid of him without any problems.
Thanks to all!!!
In fact, everything is very simple, such a seemingly ordinary line of code that, under certain conditions, can cause a leak:
delete testedObject[ i ].obj; But, I repeat only in certain conditions. One more thing, for the time being, it is not exactly known whether this is a browser bug or a JS feature.
Google said nothing to me about this. Digging into the ECMAScript specification also did nothing, because it is difficult to understand in a sober state. Actually this was the reason for writing this article.
Prehistory
So, I started working on project X, for one firm Y. They needed a management system for the firm, employees, etc., all in one package. The whole thing had to work through the browser. It was decided to write this miracle on JS. The specificity of the application is such that the tab could be open all day, and actively used. Therefore, we fought for every kilobyte of memory and every millisecond of CPU time. The frameworks didn’t cope with this task, and I had to write my bikes, and then miracles began!
The essence
After the next portion of the finished piece of the application, testing began, and oh God, the application slowly eats memory and does not want to stop. And in all browsers polls. For Fox, the most fatal outcome is that closing the tab does not help, and the memory remains eaten. At first, I sinned on my bike, but after a while I got to the bottom of the truth and realized that it was all about the delete operator.
')
At first, I was "delighted" that I found another bug browser. But then he was tormented by doubts, because it can’t be such that all browsers polls run. Yes, and in large frameworks, the delete operator is very actively used.
Therefore, I began to compromise a leak in jQuery, I suffered for a couple of hours, but there was no leakage. What is the matter, looked into the jQuery code and did not find any magic there. Well, okay, I thought, I created a new file, made a prototype of the function where there is a leak, and began to deal with obscenities with it.
Actually prototype code, with leak
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> var count = 100000; var testedObject; function getObject() { // return { first: { val : 'tratata', item : { val : 'tratata' } }, second: { val : 'tratata', item : { val : 'tratata' } }, third: { val : 'tratata', item : { val : 'tratata' } }, fourth: { val : 'tratata', item : { val : 'tratata' } }, fifth: { val : 'tratata', item : { val : 'tratata' } }, sixth: { val : 'tratata', item : { val : 'tratata' } }, seventh: { val : 'tratata', item : { val : 'tratata' } }, eighth: { val : 'tratata', item : { val : 'tratata' } }, ninth: { val : 'tratata', item : { val : 'tratata' } } }; } // function fillArray() { testedObject = {}; for( var i = 0; i < count; i++ ) { testedObject[ i ] = { obj : getObject() }; } } // function deleteObjects() { for( var i = 0; i < count; i++ ) { delete testedObject[ i ].obj; } } </script> </head> <body> <div> <button onclick="fillArray()" > </button> <button onclick="deleteObjects()" > </button> </div> </body> </html> Screen leakage:
On the screen you can clearly see that at the moment of deletion of objects, the memory is somehow otzhiraetsya, but then released to its previous state. But still, the memory allocated for objects that have been deleted has not been cleared.
At the same time, the delete operator behaves quite normally, does not swear and does not scream, objects seem to be deleted and everything is normal, but the memory occupied by them is not released.
Off the drain
Some time later, I realized that everything is quite simple, and the leakage can be avoided, but I will have to rebuild the code a little.
The memory is cleared if you do this:
delete testedObject[ i ]; Leak free option
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> var count = 100000; var testedObject; function getObject() { // return { first: { val : 'tratata', item : { val : 'tratata' } }, second: { val : 'tratata', item : { val : 'tratata' } }, third: { val : 'tratata', item : { val : 'tratata' } }, fourth: { val : 'tratata', item : { val : 'tratata' } }, fifth: { val : 'tratata', item : { val : 'tratata' } }, sixth: { val : 'tratata', item : { val : 'tratata' } }, seventh: { val : 'tratata', item : { val : 'tratata' } }, eighth: { val : 'tratata', item : { val : 'tratata' } }, ninth: { val : 'tratata', item : { val : 'tratata' } } }; } function fillArray() { testedObject = { obj : {} }; for( var i = 0; i < count; i++ ) { testedObject.obj[ i ] = getObject(); } } function deleteObjects() { for( var i = 0; i < count; i++ ) { delete testedObject.obj[ i ]; } } </script> </head> <body> <div> <button onclick="fillArray()" > </button> <button onclick="deleteObjects()" > </button> </div> </body> </html> The changes are certainly not so complex, and they did not greatly influence the architecture of my bike, but it was very unexpected and annoying that the first option created a leak.
Immediately make a reservation that the cause of the leak is not scopes, not contexts, not indices, not the names of the parameters - I checked it all.
Conclusion
So, I kind of fixed the leak, and all is well, life is good. But I still suffer a lot of questions:
What is the fundamental difference between the first version of the function and the second?
And is it a feature or a browser bug?
If a feature, then why is this feature not described in any manner of JS?
If a browser bug, then why so many years later is it still there?
Maybe someone already knows about it, but is silent?
I hope my article will help someone! And I think you should check your bikes for such leaks!
PS: Thank you all for your attention !!!
UPDATE 1:
UPDATE 2:
Beam at the end of the tunnel
So, the situation has cleared up, thanks for this huge mraleph and seriyPS , in their comments, everything is described in detail. # comment_5107501 , # comment_5107585 , # comment_5107692 , Mavim also describes my particular case in detail .
All questions received clear answers, this is not the magic of JavaScript, not a leak and not a browser bug, this is a feature of the implementation of the operator delete. And rather, it can be called redundant use of memory, and I just stepped on such a mine. But now we know the enemy by sight and get rid of him without any problems.
Thanks to all!!!
Source: https://habr.com/ru/post/150723/
All Articles