Memory Leak in JavaScript

LeviDing 發布于2019-08-22 10:37 / 652人閱讀

Memory Leak (內存泄漏)

Origin: https://aleen42.gitbooks.io/p...
Date: Sep, 10th, 2016

In the process of developing front-end application, like web application, "memory leak" means that a space created before cannot be used or collect any more until the browser is closed.

Though the browser has GC (Garbage Collection), but there is bug on this collection, which will lead to memory leak case.

Here we list some cases that will cause memory leak in JavaScript:

Event Listener

When a DOM has changed, if its event listener has not be removed, IE will not handle it for you and it causes memory leak.

In such kinds of cases, you can solve by remove the listner:

Or use event delegation(事件委託):

DOM or ActiveX Object Reference

In ECMAScript, reference between two DOM elements can be collected, if no other elements refer to them like:

var a = document.getElementById("xxx");
var b = document.getElementById("xx");

/** can still be collected */
a.reference = b;
b.reference = a;

However, in IE, if you loop to refer to any DOM or ActiveX Object, GC won"t collect and release these elements.

var a = document.getElementById("xxx");
a.reference = a;

Closure

Closures will sometimes cause memory leak by holding a variable.

function bindEvent() {
    var obj = document.getElementById("xxx");
    
    obj.onclick = function () {
        /** will keep holding obj even if it"s a empty function */
    };
}

For this situation, we can solve it by defining handling event outside the container:

function clickHandler() {
    /** handler for click event */
}

function bindEvent() {
    var obj = document.getElementById("xxx");
    
    obj.onclick = clickHandler;
}

Or directly release by deleting:

function bindEvent() {
    var obj = document.getElementById("xxx");
    
    obj.onclick = function () {
        /** empty function */
    };
    
    /** delete this reference */
    obj = null;
}

Delete loosely

Sometimes, if you delete an object loosely, it will result in memory leak:

var a = { p: { x: 1 } };
var b = a.p;

delete a.p;

console.log(b.x);   /** still output => 1 */

Therefore, when deleting an object, remember to delete recursively.

var a = { p: { x: 1 } };
var b = a.p;

function deleteObj(obj) {
    if (_.isObject(obj)) {
        delete obj;
        
        for (var i in obj) {
            deleteObj(i);
        }
    }
}

Boxing?

According to some documents, the following code will result in memory leak in IE, because IE will temporary create a String obj when accessing the property length, which will have a leak:

var s = "abc";

console.log(s.length);

Therefore, before we access any property of a value object, we are recommended to convert them before:

var s = "123";

console.log(new String(s).length);

Illegal DOM Operations?

Some illegal DOM operations will result in memory leak in IE, like we call appendChild of a DOM element, which is not in the DOM tree.

Pollution of the global namespace

Undefined variable will be defined in the global name-space, which is another memory leak:

function foo() {
    bar = "this is a hidden global variable";
}

Actually:

function foo() {
    window.bar = "this is a hidden global variable";
}

More worse:

function foo() {
    this.bar = "potential global";
}

foo();

Therefore, we can use the strict mode to limit our code:

/**
 * any acident global variable will thorw out an error
 * in the strict mode 
 */
"use strict";

GPU云服務器云服務器 javascript in leak memory webrtc leak

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/90951.html

Netty ByteBuf 誰負責誰釋放

摘要：轉發自轉發自 http://netty.io/wiki/referenc... Since Netty version 4, the life cycle of certain objects are managed by their reference counts, so that Netty can return them (or their shared resources)...

Lyux 2019-08-15 15:23 評論0 收藏0
Memory Management and Circular References in Pytho

摘要：一般情況下，的垃圾收集器會被用于檢測上面這樣的循環引用，并刪除掉它們。你可以通過強制垃圾收集器運行，并檢查列表里有什么來驗證上述結論。 -- [since Python 3.4, circular references are handled much better](http://engineering.hearsaysocial.com/2013/06/16/circular-re...

muddyway 2019-07-30 14:23 評論0 收藏0
Node.js內存管理和V8垃圾回收機制

摘要：垃圾回收內存管理實踐先通過一個來看看在中進行垃圾回收的過程是怎樣的內存泄漏識別在環境里提供了方法用來查看當前進程內存使用情況，單位為字節中保存的進程占用的內存部分，包括代碼本身棧堆。 showImg(https://segmentfault.com/img/remote/1460000019894672?w=640&h=426);作者 | 五月君Node.js 技術棧 | https:...

JowayYoung 2019-08-23 18:27 評論0 收藏0
VueJS SSR 后端繪制內存泄漏的相關解決經驗

摘要：積少成多，最后造成內存泄漏。前端內存泄漏的影響，都是發生在客戶機器上，而且基本上現代瀏覽器也會做好保護機制，一般自行刷新之后都會解決。但是，一旦后端繪制內存泄漏造成宕機之后，整個服務器都會受影響，危險性更大，搞不好年終獎就沒了。引言 Memory Leak 是最難排查調試的 Bug 種類之一，因為內存泄漏是個 undecidable problem，只有開發者才能明確一塊內存是不是需...

lifesimple 2019-08-23 14:11 評論0 收藏0
內存泄漏

摘要：假如沒有此時會進行優化把不會被任何閉包用到的變量從詞法環境中去掉從而消除內存泄漏。良好的編碼方式了解一下常見現象可以減少內存泄漏現象產生同時在由于失誤產生泄漏時保持清醒的思路借助進行分析定位。引言內存泄漏一般是由于我們編碼缺陷導致的,首先明確一下內存泄漏的定義,就是應用程序不需要,但是又不能返回給操作系統以供重新分配使用,導致可用內存越來越少的現象。下面總結一下在browser端內...

jeffrey_up 2019-08-21 16:59 評論0 收藏0