This article explains in detail the timing and methods of memory management and release by JavaScript and IE browser, hoping to be helpful to front-end developers.
An instance of memory release
The code copy is as follows:
<SCRIPT LANGUAGE="JavaScript">
<!--
strTest = "1";
for ( var i = 0; i < 25; i ++ )
{
strTest += strTest;
}
alert(strTest);
delete strTest;
CollectGarbage();
//-->
</SCRIPT>
CollectGarbage is a unique property of IE, used to release memory. The usage method should be: set the variable or reference object to null or delete, and then perform the release action.
Two necessary conditions must be clear before doing CollectGarbage:
Reference - An object is invalid outside the context in which it lives.
- A global object will be invalid if it is not executed (referenced).
The code copy is as follows:
//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
// When will JavaScript object fail
//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
function testObject() {
var _obj1 = new Object();
}
function testObject2() {
var _obj2 = new Object();
return _obj2;
}
// Example 1
testObject();
// Example 2
testObject2()
// Example 3
var obj3 = testObject2();
obj3 = null;
// Example 4
var obj4 = testObject2();
var arr = [obj4];
obj3 = null;
arr = [];
In these four examples:
- "Example 1" constructs _obj1 in the function testObject(), but when the function exits, it has left the function's context, so _obj1 is invalid;
- In "Example 2", an object _obj2 is also constructed in testObject2() and passed out, so the object has a context environment (and lifetime) "outside the function", but since the return value of the function is not "held" by other variables, _obj2 is immediately invalid;
- In "Example 3", the _obj2 constructed by testObject2() is held by the external variable obj3. At this time, until the line of code "obj3=null" takes effect, _obj2 will not be invalid because the reference relationship disappears.
- For the same reason as in Example 3, _obj2 in "Example 4" will not be invalid after the line of code "arr=[]".
However, the "failure" of the object does not wait to be "released". Inside the JavaScript runtime, there is no way to tell the user exactly "when will the object be released". This depends on JavaScript's memory recovery mechanism. ―This strategy is similar to the recycling mechanism in .NET.
In the previous Excel operation example code, the owner of the object, that is, "EXCEL.EXE", will only occur after "release of ActiveX Object instance". The file locks and the operating system's permission credentials are related to the process. So if the object is only "failed" and not "release", then other processes will have problems when processing files and referring to the operating system's permission credentials.
- Some people say this is a bug in JavaScript or COM mechanism. Actually, it is not. This is caused by a complex relationship between OS, IE and JavaScript, rather than an independent problem.
Microsoft has exposed a strategy to solve this problem: proactively call the memory recycling process.
A CollectGarbage() process (usually referred to as the GC process) is provided in (Microsoft) JScript. The GC process is used to clean up the "failed object misalignment" in the current IE, that is, the destructor process of calling the object.
In the above example, the code that calls the GC procedure is:
The code copy is as follows:
//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
// Standard calling method of GC procedures when processing ActiveX Object
//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
function writeXLS() {
//(slightly...)
excel.Quit();
excel = null;
setTimeout(CollectGarbage, 1);
}
The first line of code calls the excel.Quit() method to make the excel process abort and exit. At this time, since the JavaScript environment has an excel object instance, the excel process does not actually abort.
The second line of code makes excel null to clear object references, thus "invalidating" the object. However, since the object is still in the function context, if the GC procedure is called directly, the object will still not be cleaned.
The third line of code uses setTimeout() to call the CollectGarbage function, and the time interval is set to '1', which only makes the GC process happen after the writeXLS() function is executed. In this way, the excel object meets two conditions of "can be cleaned up by GC": no reference and leaving the context.
The use of GC procedures is very effective in JS environments using ActiveX Object. Some potential ActiveXObjects include XML, VML, OWC (Office Web Componet), flash, and even VBArray in JS. From this point of view, because the ajax architecture adopts XMLHTTP and also needs to meet the "no page switching" feature, actively calling the GC process at appropriate times will give you a better efficiency experience using the UI.
In fact, even with the GC process, the aforementioned excel problem will not be completely solved. Because IE also caches permission credentials. The only way to make the page's permission credentials be updated is to "switch to a new page",
Therefore, in fact, in the SPS project mentioned above, the method I used was not GC, but the following code:
The code copy is as follows:
//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
// Page switching code used when processing ActiveX Object
//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
function writeXLS() {
//(slightly...)
excel.Quit();
excel = null;
// The following code is used to solve a bug in IE call Excel, the method provided in MSDN:
// setTimeout(CollectGarbage, 1);
// Since the trusted state of the web page cannot be cleared (or synchronized) will cause SaveAs() and other methods to be
// Invalid next time you call it.
location.reload();
}
Description of delete operator in manual
Reference removes an attribute from an object, or deletes an element from an array.
delete expression
The expression parameter is a valid JScript expression, usually a property name or an array element.
illustrate
If the result of expression is an object and the attribute specified in expression exists, and the object does not allow it to be deleted, false is returned.
In all other cases, return true.
Finally, a supplementary note about GC: When the IE form is minimized, IE will actively call the CollectGarbage() function once. This makes the memory usage significantly improved after the IE window is minimized