blocks|key|1342222|text|当涉及到DOM对象时，要注意循环引用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1342223|Memory+leak+patterns+in+JavaScript|offset|length|1342224|请记住，只有当没有对对象的活动引用时，才能回收内存。这是闭包和事件处理程序的常见缺陷，因为一些JS引擎不会检查内部函数中实际引用了哪些变量，而只是保留封闭函数的所有局部变量。|1342225|下面是一个简单的例子：|1342226|function+init()+{
++++var+bigString+=+new+Array(1000).join('xxx');
++++var+foo+=+document.getElementById('foo');
++++foo.onclick+=+function()+{
++++++++//+this+might+create+a+closure+over+`bigString`,
++++++++//+even+if+`bigString`+isn't+referenced+anywhere!
++++};
}|code-block|syntax|javascript|1342227|只要事件处理程序还在，一个简单的JS实现就不能收集bigString。有几种方法可以解决这个问题，例如在init()的末尾设置bigString+=+null+(delete不适用于局部变量和函数参数：delete从对象中移除属性，并且变量对象是不可访问的-如果您试图删除局部变量，严格模式下的ES5甚至会抛出ReferenceError！)。|style|CODE|1342228|如果您关心内存消耗，我建议尽可能避免不必要的闭包。|1342229|entityMap|0|LINK|mutability|MUTABLE|url|http://www.ibm.com/developerworks/web/library/wa-memleak/^0|0|0|Y|0|0|0|0|0|P|9|1G|6|1R|G|29|6|2T|6|4B|E|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@$D|14|E|15|1|16]]|A|$]]|$1|F|3|G|5|6|7|17|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|18|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|19|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1A|8|@$D|1B|E|1C|Q|R]|$D|1D|E|1E|Q|R]|$D|1F|E|1G|Q|R]|$D|1H|E|1I|Q|R]|$D|1J|E|1K|Q|R]|$D|1L|E|1M|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|6|7|1N|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

Beware of circular references when DOM objects are involved:

<a href="http://www.ibm.com/developerworks/web/library/wa-memleak/" rel="noreferrer">Memory leak patterns in JavaScript</a>

Keep in mind that memory can only be reclaimed when there are no active references to the object. This is a common pitfall with closures and event handlers, as some JS engines will not check which variables actually are referenced in inner functions and just keep all local variables of the enclosing functions.

Here's a simple example:

<pre><code>function init() {
 var bigString = new Array(1000).join('xxx');
 var foo = document.getElementById('foo');
 foo.onclick = function() {
 // this might create a closure over `bigString`,
 // even if `bigString` isn't referenced anywhere!
 };
}
</code></pre>

A naive JS implementation can't collect <code>bigString</code> as long as the event handler is around. There are several ways to solve this problem, eg setting <code>bigString = null</code> at the end of <code>init()</code> (<code>delete</code> won't work for local variables and function arguments: <code>delete</code> removes properties from objects, and the variable object is inaccessible - ES5 in strict mode will even throw a <code>ReferenceError</code> if you try to delete a local variable!).

I recommend to avoid unnecessary closures as much as possible if you care for memory consumption.

blocks|key|1557781|text|摘自博客中的一句名言|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1557782|DOM组件和JScript组件一样都是“垃圾收集”的，这意味着如果您在任一组件中创建了一个对象，然后丢失了对该对象的跟踪，它最终将被清除。|1557783|例如：|1557784|function+makeABigObject()+{
var+bigArray+=+new+Array(20000);
}|code-block|syntax|javascript|1557785|调用该函数时，JScript组件将创建一个可在该函数中访问的对象(名为bigArray)。但是，一旦函数返回，您就会“失去对bigArray的跟踪”，因为无法再引用它。那么，JScript组件意识到您已经失去了它的踪迹，因此清理了bigArray+--回收了它的内存。同样的事情也适用于DOM组件。如果您说document.createElement('div')或类似的内容，那么DOM组件将为您创建一个对象。一旦您以某种方式丢失了对该对象的跟踪，DOM组件将清理相关的。|offset|length|style|CODE|1557786|entityMap^0|0|0|0|0|49|T|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|W|8|@$M|X|N|Y|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Good quote taken from a blog

The DOM component is "garbage collected", as is the JScript component, which means that if you create an object within either component, and then lose track of that object, it will eventually be cleaned up.

For example:

<pre><code>function makeABigObject() {
var bigArray = new Array(20000);
}
</code></pre>

When you call that function, the JScript component creates an object (named bigArray) that is accessible within the function. As soon as the function returns, though, you "lose track" of bigArray because there's no way to refer to it anymore. Well, the JScript component realizes that you've lost track of it, and so bigArray is cleaned up--its memory is reclaimed. The same sort of thing works in the DOM component. If you say <code>document.createElement('div')</code>, or something similar, then the DOM component creates an object for you. Once you lose track of that object somehow, the DOM component will clean up the related.

blocks|key|1342314|text|据我所知，当没有对JavaScript对象的引用时，JavaScript的对象会定期被垃圾回收。这是自动发生的事情，但是如果您想更多地了解它是如何工作的，那么在C%2B%2B级别上看一下WebKit或V8+source+code是有意义的|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1342315|通常你不需要考虑这一点，然而，在更老的浏览器中，比如IE5.5和IE6的早期版本，也许在当前版本中，闭包会创建循环引用，如果不选中它，最终会消耗内存。在我所说的关于闭包的特殊情况下，是在向dom对象添加JavaScript引用，以及向DOM对象添加回引用JavaScript对象的对象时。基本上，它永远不会被收集，最终会导致操作系统在测试应用程序中变得不稳定，从而导致崩溃。实际上，这些泄漏通常很小，但是为了保持代码的整洁，您应该删除对DOM对象的JavaScript引用。|1342316|通常，使用delete关键字来立即解除对大型对象的引用是一个好主意，特别是在移动web开发中。这会导致GC的下一次扫描删除该对象并释放其内存。|1342317|entityMap|0|LINK|mutability|MUTABLE|url|http://webkit.org/building/checkout.html|1|http://code.google.com/p/v8/^0|2H|6|0|2O|E|1|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]|$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]]]

To the best of my knowledge, JavaScript's objects are garbage collected periodically when there are no references remaining to the object. It is something that happens automatically, but if you want to see more about how it works, at the C++ level, it makes sense to take a look at the <a href="http://webkit.org/building/checkout.html" rel="noreferrer">WebKit</a> or <a href="http://code.google.com/p/v8/" rel="noreferrer">V8 source code</a>

Typically you don't need to think about it, however, in older browsers, like IE 5.5 and early versions of IE 6, and perhaps current versions, closures would create circular references that when unchecked would end up eating up memory. In the particular case that I mean about closures, it was when you added a JavaScript reference to a dom object, and an object to a DOM object that referred back to the JavaScript object. Basically it could never be collected, and would eventually cause the OS to become unstable in test apps that looped to create crashes. In practice these leaks are usually small, but to keep your code clean you should delete the JavaScript reference to the DOM object.

Usually it is a good idea to use the delete keyword to immediately de-reference big objects like JSON data that you have received back and done whatever you need to do with it, especially in mobile web development. This causes the next sweep of the GC to remove that object and free its memory.

blocks|key|1342361|text|在windows上，您可以使用Drip.exe查找内存泄漏或检查您的免费内存例程是否工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1342362|这真的很简单，只需要输入一个网站URL，你就会看到集成的IE渲染器的内存消耗。然后点击刷新，如果内存增加，你会发现网页上的某个地方有内存泄漏。但这对于查看用于释放内存的例程是否适用于IE也非常有用。|1342363|entityMap|0|LINK|mutability|MUTABLE|url|http://home.orange.nl/jsrosman/^0|F|8|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

On windows you can use <a href="http://home.orange.nl/jsrosman/" rel="nofollow">Drip.exe</a> to find memory leaks or check if your free mem routine works. 

It's really simple, just enter a website URL and you will see the memory consumption of the integrated IE renderer. Then hit refresh, if the memory increases, you found a memory leak somewhere on the webpage. But this is also very useful to see if routines for freeing memory work for IE.

blocks|key|1342425|text|在javascript中，垃圾收集是不确定的，对象何时会被清除，或者它是否会被清除。这适用于强引用的对象。强引用对象受到保护，不受垃圾回收的影响。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1342426|在ES12之后，可以执行以下实现来检查对象何时被垃圾回收。|1342427|要更多地了解javascript中的垃圾收集，可以使用在ES12之后可用的Finalisers。|1342428|let+a+=+new+Array(200).fill(true);|code-block|syntax|javascript|1342429|构造终结器|1342430|const+cleanup+=+new+FinalizationRegistry(key+=>+{
++//+your+code+here
});

cleanup.register(a,+'wewew');|1342431|对象'a‘现在不可访问，终结器回调将在垃圾回收之后发生|1342432|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

In javascript, garbage collection is non-deterministic, when an object will be cleared, or if it ever will be. This applies to objects which are strong referenced. Strong referenced objects are protected from Garbage collection.
After ES12, the below implementation can be done to check when an object is garbage collected.
To understand more about garbage collection in javascript, you can use Finalisers available after ES12.
<pre><code>let a = new Array(200).fill(true);
</code></pre>
to construct finaliaser
<pre><code>const cleanup = new FinalizationRegistry(key =&gt; {
 // your code here
});

cleanup.register(a, 'wewew');
</code></pre>
Object 'a' is now non-reachable, finalizer callback will happen after garbage collection

What is JavaScript garbage collection? What's important for a web programmer to understand about JavaScript garbage collection, in order to write better code?

What is JavaScript garbage collection?

什么是JavaScript垃圾收集？对于web程序员来说，为了写出更好的代码，理解JavaScript垃圾回收有什么重要的？

问什么是JavaScript垃圾收集？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问什么是JavaScript垃圾收集？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问什么是JavaScript垃圾收集？
EN