循环写记录造成内存泄漏
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; // 设置滚动条位置为最底部 }