How to decrease CPU usage by an extensive loop?

I am creating a script that draws an ASCII picture. I need to separate each individual character in a tag, though the page gets too laggy and the CPU usage goes up by an extreme amount when executing the loop, the process doesn’t even finish, as it normally would without adding the tag (printing only the characters).

Here is the loop I used:

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>"
    }
}

I tried setting a delay for each character with setTimeout() but it didn’t solve the problem.