幾種常見的引起js內存泄露導致頁面崩潰的情況

1、意外的全局變量

haorooms ="這是一個全局的";

實際上生成了一個全局的haorooms,雖然也佔用不了多少內存,但是我們在編程中儘量少的避免全局變量。

另外一種全局變量可能由this創建。例如:

function foo() {
    this.variable = "potential accidental global";
}
// Foo 調用自己,this 指向了全局對象(window)
foo();

2、被遺忘的的計時器或回調函數
setInterval用多了,會佔用大量的內存。因此setInterval我們必須及時清理!可以用如下方式清理setInterval。

function init()
{
    window.ref = window.setInterval(function() { draw(); }, 50);
}
function draw()
{
    console.log('Hello');
    clearInterval(window.ref);
    init();
}
init();​

或者使用setTimeout來代替

function time(f, time) {
    return function walk() {
     clearTimeout(aeta);
        var aeta =setTimeout(function () {
            f();
            walk(); 
        }, time);
    };
}

time(updateFormat, 1000)();

3,DOM 引用
有時,保存 DOM 節點內部數據結構很有用。假如你想快速更新表格的幾行內容,把每一行 DOM 存成字典(JSON 鍵值對)或者數組很有意義。此時,同樣的 DOM 元素存在兩個引用:一個在 DOM 樹中,另一個在字典中。將來你決定刪除這些行時,需要把兩個引用都清除。

var elements = {
    button: document.getElementById('button'),
    image: document.getElementById('image'),
    text: document.getElementById('text')
};
function doStuff() {
    image.src = 'http://some.url/image';
    button.click();
    console.log(text.innerHTML);
    // 更多邏輯
}
function removeButton() {
    // 按鈕是 body 的後代元素
    document.body.removeChild(document.getElementById('button'));
    // 此時,仍舊存在一個全局的 #button 的引用
    // elements 字典。button 元素仍舊在內存中,不能被 GC 回收。
}

4、閉包
下面這種情況下,閉包也會造成內存泄露


var theThing = null;
var replaceThing = function () {
 var originalThing = theThing;
 var unused = function () {
 if (originalThing) // 對於 'originalThing'的引用
 console.log("hi");
 };
 theThing = {
 longStr: new Array(1000000).join('*'),
 someMethod: function () {
 console.log("message");
 }
 };
};
setInterval(replaceThing, 1000);

這段代碼,每次調用 replaceThing 時,theThing 獲得了包含一個巨大的數組和一個對於新閉包 someMethod 的對象。
同時 unused 是一個引用了 originalThing 的閉包。
這個範例的關鍵在於,閉包之間是共享作用域的,儘管 unused 可能一直沒有被調用,但是 someMethod 可能會被調用,就會導致無法對其內存進行回收。
當這段代碼被反覆執行時,內存會持續增長。

5、echart不停調用導致內存泄露
不停的用setInterval調用echart,更新echart表格及地圖數據,及時清理了setInterval,也會導致內存泄露!

    myChart.clear();              //首先清空設置
    myChart.setOption(option);    //再setOption時,僅修改需要修改的設置即可

谷歌瀏覽器查看內存使用
在這裏插入圖片描述

參考鏈接 https://www.haorooms.com/post/javascript_neicun_use
參考鏈接 https://blog.csdn.net/muzidigbig/article/details/100169801

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章