文档手册

循环写记录造成内存泄漏

2024-07-08 10:54:45

创建元素就会内存泄漏

//原始代码:

    function jilu(msg) {      
        let ele = document.createElement("p");
        ele.innerHTML = msg 
        let jilu = document.getElementById("jilu"); // 获取目标DIV元素 
        if(jilu.children.length > 30){  
            jilu.removeChild(jilu.firstElementChild)                    
        }else{
            jilu.appendChild(ele); 
        }            
        jilu.scrollTop = jilu.scrollHeight; // 设置滚动条位置为最底部    
    }


不断写新的记录进去值保留30条,之前的删掉这样会造成内存泄漏,100万条会产生1500MB内存


用元素池的方式,避免生成太多元素可以解决内存泄漏问题:

// 创建元素池写记录不会内存泄漏
let elementPool = [];
function createOrReuseElement() {
    if (elementPool.length > 0) {
        return elementPool.pop(); // 从池中取出一个元素
    } else {
        log("创建元素:"+elementPool.length)
        return document.createElement("p"); // 创建新的元素
    }
}
function recycleElement(ele) {
    elementPool.push(ele); // 将元素放回池中
}

function jilu(msg) {      
    let ele = createOrReuseElement(); // 复用或创建新元素
    ele.innerHTML = msg;
    let jilu = document.getElementById("jilu"); // 获取目标DIV元素 

    if (jilu.children.length > 30) {  
        let firstChild = jilu.firstElementChild;
        jilu.removeChild(firstChild);
        recycleElement(firstChild); // 将移除的元素放回池中
    } 
    jilu.appendChild(ele); 
    jilu.scrollTop = jilu.scrollHeight; // 设置滚动条位置为最底部    
}