如何限制innerHTML追加内容仅保留最后5条避免页面CPU占用过高

AI 小北

2026-9-27

实现方案

原有代码的问题：每次执行div.innerHTML += ...都会重新解析整个div的所有DOM内容，加上无限新增p标签，DOM节点数越来越多，每次重解析的耗时也会越来越高，最终导致CPU占用飙升。

你可以选择以下任意一种方案实现，保证容器仅保留最近5条内容：

方案1：用队列缓存内容（性能最优）

维护固定长度的内容队列，每次批量更新容器内容，避免频繁DOM重渲染：

// 存储最近5条内容的队列
const contentQueue = [];
function addInDiv() {
    const div = document.getElementById("divName");
    // 新内容加入队尾
    contentQueue.push("<p>test</p>");
    // 超出长度则移除最早的内容
    if (contentQueue.length > 5) {
        contentQueue.shift();
    }
    // 一次性更新容器内容
    div.innerHTML = contentQueue.join('');
}
    
setInterval(addInDiv, 1000);

方案2：直接操作DOM节点（安全性更高）

直接创建DOM节点添加，超出数量时删除最早的子节点，还可以避免XSS注入风险：

function addInDiv() {
    const div = document.getElementById("divName");
    // 创建p节点设置内容，避免直接拼接HTML的安全风险
    const newP = document.createElement('p');
    newP.textContent = 'test';
    div.appendChild(newP);
    // 子节点数量超过5时删除第一个（最早的）节点
    if (div.children.length > 5) {
        div.removeChild(div.firstElementChild);
    }
}
    
setInterval(addInDiv, 1000);