如何通过大量循环来降低CPU使用率？

Question

我正在创建一个绘制 ASCII 图片的脚本。我需要分隔标签中的每个单独字符，尽管页面变得太滞后并且执行循环时 CPU 使用率急剧上升，但该过程甚至没有完成，就像通常不添加标签一样（打印仅字符）。

这是我使用的循环：

for(let widthCounter = 0; widthCounter <= 2500; widthCounter++) {
    document.getElementById("textMain").innerHTML += ("<span>" + currentScene[widthCounter] + "</span>");

    totalCharsDrawn += 1 

    if (totalCharsDrawn == 100) {
        document.getElementById("textMain").innerHTML += "<br>"
    }
}

我尝试使用

setTimeout()

为每个角色设置延迟，但没有解决问题。

Answer 1

首先，生成整个字符串，然后，更新 DOM。

const currentScene = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat turpis velit, et pharetra arcu hendrerit sed. Pellentesque ultricies arcu at nulla rutrum, sit amet egestas lorem tincidunt. Pellentesque eget diam sit amet velit ultrices venenatis laoreet quis mauris. Phasellus orci lacus, condimentum nec diam in, viverra egestas lorem. Nunc ac mollis neque, gravida dignissim lorem. Fusce vel lacus vel elit consectetur varius. Etiam ultrices blandit gravida. Vestibulum quis sollicitudin risus. Maecenas vitae ante tellus. Sed tortor nunc, facilisis vitae odio auctor, dignissim semper dui. Nulla luctus est tellus, in ultricies velit malesuada et. Donec rutrum, erat vel molestie vestibulum, metus turpis volutpat elit, in feugiat purus massa in diam. In sit amet sapien libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum venenatis at lorem in consectetur. Proin id ex efficitur, faucibus tellus in, pulvinar urna. Nullam dapibus nibh nec nisi consequat hendrerit ac at ante. Phasellus ornare nunc ac luctus vestibulum. Sed egestas elit at mattis pretium. Aenean semper nec metus et hendrerit. Suspendisse mattis massa at nunc dapibus egestas. Phasellus a suscipit libero. Nullam dapibus dapibus tellus, vel ullamcorper neque iaculis at. Suspendisse sed dignissim ex. Praesent at dolor at enim pellentesque maximus at in massa. Donec et auctor neque. Integer eget ex est. Mauris efficitur, lectus ac pulvinar pulvinar, arcu elit convallis arcu, ut faucibus risus tortor a purus. Vestibulum id metus condimentum, scelerisque purus sed, cursus enim. Sed consequat, elit eu tempor facilisis, quam ligula luctus tortor, vitae suscipit urna lacus ac urna. Curabitur ornare nisl sed augue commodo, vitae porta ligula fringilla. Proin eget augue eu nunc luctus facilisis. Mauris dictum ante non faucibus sollicitudin. Etiam et vestibulum purus, in suscipit nisi. Sed vel consequat nisi, eget molestie arcu. Donec ornare interdum fermentum. Nunc sed lobortis nibh. Aenean at dolor ullamcorper, fringilla leo nec, semper diam. Integer mattis vitae tellus eget dictum. Etiam quis lacinia eros. Sed vitae laoreet ipsum, ac bibendum dolor. Duis at suscipit erat, ac sagittis dolor. In tempus lacus non odio iaculis, eu pellentesque tortor hendrerit. Sed magna ante, eleifend iaculis interdum id, ornare sed ipsum. Aenean ut mauris et ligula finibus finibus sit amet sed eros. Morbi hendrerit enim sit amet vehicula cursus. Curabitur faucibus urna non.";

let totalCharsDrawn = 0;

const start = Date.now();
let content = "";
for(let widthCounter = 0; widthCounter < currentScene.length; widthCounter++) {
    content += "<span>" + currentScene[widthCounter] + "</span>";

    totalCharsDrawn += 1 

    if (totalCharsDrawn == 100) {
        content += "<br>"
    }
}
document.getElementById("textMain").innerHTML = content;
console.log(Date.now() - start);

<div id="textMain"></div>

我添加了一个计时器来比较这两种方法。

const currentScene = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat turpis velit, et pharetra arcu hendrerit sed. Pellentesque ultricies arcu at nulla rutrum, sit amet egestas lorem tincidunt. Pellentesque eget diam sit amet velit ultrices venenatis laoreet quis mauris. Phasellus orci lacus, condimentum nec diam in, viverra egestas lorem. Nunc ac mollis neque, gravida dignissim lorem. Fusce vel lacus vel elit consectetur varius. Etiam ultrices blandit gravida. Vestibulum quis sollicitudin risus. Maecenas vitae ante tellus. Sed tortor nunc, facilisis vitae odio auctor, dignissim semper dui. Nulla luctus est tellus, in ultricies velit malesuada et. Donec rutrum, erat vel molestie vestibulum, metus turpis volutpat elit, in feugiat purus massa in diam. In sit amet sapien libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum venenatis at lorem in consectetur. Proin id ex efficitur, faucibus tellus in, pulvinar urna. Nullam dapibus nibh nec nisi consequat hendrerit ac at ante. Phasellus ornare nunc ac luctus vestibulum. Sed egestas elit at mattis pretium. Aenean semper nec metus et hendrerit. Suspendisse mattis massa at nunc dapibus egestas. Phasellus a suscipit libero. Nullam dapibus dapibus tellus, vel ullamcorper neque iaculis at. Suspendisse sed dignissim ex. Praesent at dolor at enim pellentesque maximus at in massa. Donec et auctor neque. Integer eget ex est. Mauris efficitur, lectus ac pulvinar pulvinar, arcu elit convallis arcu, ut faucibus risus tortor a purus. Vestibulum id metus condimentum, scelerisque purus sed, cursus enim. Sed consequat, elit eu tempor facilisis, quam ligula luctus tortor, vitae suscipit urna lacus ac urna. Curabitur ornare nisl sed augue commodo, vitae porta ligula fringilla. Proin eget augue eu nunc luctus facilisis. Mauris dictum ante non faucibus sollicitudin. Etiam et vestibulum purus, in suscipit nisi. Sed vel consequat nisi, eget molestie arcu. Donec ornare interdum fermentum. Nunc sed lobortis nibh. Aenean at dolor ullamcorper, fringilla leo nec, semper diam. Integer mattis vitae tellus eget dictum. Etiam quis lacinia eros. Sed vitae laoreet ipsum, ac bibendum dolor. Duis at suscipit erat, ac sagittis dolor. In tempus lacus non odio iaculis, eu pellentesque tortor hendrerit. Sed magna ante, eleifend iaculis interdum id, ornare sed ipsum. Aenean ut mauris et ligula finibus finibus sit amet sed eros. Morbi hendrerit enim sit amet vehicula cursus. Curabitur faucibus urna non.";

let totalCharsDrawn = 0;

const start = Date.now();
for(let widthCounter = 0; widthCounter < currentScene.length; widthCounter++) {
    document.getElementById("textMain").innerHTML += "<span>" + currentScene[widthCounter] + "</span>";

    totalCharsDrawn += 1 

    if (totalCharsDrawn == 100) {
        document.getElementById("textMain").innerHTML += "<br>"
    }
}
console.log(Date.now() - start);

<div id="textMain"></div>