如何降低大循环的CPU占用？ASCII图片脚本卡顿问题求助

你的核心问题是循环中频繁操作DOM：每次循环都用innerHTML +=修改页面内容，浏览器每一次都要重新解析HTML、创建DOM节点、触发重排重绘，2500次循环就是2500次重复操作，再加上每个字符都套<span>，DOM节点数量暴增，直接导致CPU占用飙升、页面卡顿。用setTimeout单个延迟没效果，因为本质还是每次都触发DOM操作，只是把操作分散开了，总量没变。

最优解决方案：一次性拼接HTML，批量插入 #

先在内存里把所有要渲染的HTML字符串拼接好，最后一次性赋值给innerHTML，只触发一次DOM解析和渲染，性能会提升几个量级。

修改后的代码：

let htmlStr = '';
let totalCharsDrawn = 0;

for(let widthCounter = 0; widthCounter <= 2500; widthCounter++) {
    // 拼接每个字符的span标签
    htmlStr += `<span>${currentScene[widthCounter]}</span>`;
    totalCharsDrawn++;
    
    // 每100个字符加换行
    if (totalCharsDrawn === 100) {
        htmlStr += '<br>';
        totalCharsDrawn = 0; // 重置计数器，方便下一行计数
    }
}

// 最后一次性插入DOM
document.getElementById("textMain").innerHTML = htmlStr;

备选方案：用DocumentFragment批量添加节点 #

如果不想拼接字符串（比如需要给<span>加动态样式/事件），可以用DocumentFragment，它是内存中的DOM容器，不会触发页面渲染，批量添加完再插入页面：

const fragment = document.createDocumentFragment();
let totalCharsDrawn = 0;

for(let widthCounter = 0; widthCounter <= 2500; widthCounter++) {
    const span = document.createElement('span');
    span.textContent = currentScene[widthCounter];
    fragment.appendChild(span);
    
    totalCharsDrawn++;
    if (totalCharsDrawn === 100) {
        fragment.appendChild(document.createElement('br'));
        totalCharsDrawn = 0;
    }
}

document.getElementById("textMain").appendChild(fragment);

这两种方法都把2500次DOM操作压缩成1次，彻底解决频繁重排重绘的问题，CPU占用会立刻降下来，页面也不会卡顿。

内容的提问来源于stack exchange，提问作者towednack