Javascript - How to decrease CPU usage by an extensive loop?

towednack
November 7, 2024
39 views
0 votes
2 Answers

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.

Answers

First, generate the whole string, then, update the 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>

I’ve added a timer to compare both approaches.

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>

My code runs 1-2 ms on my system. Your code runs ~1300 ms on my system. Depending on the content of the website, the query and the update can use much time. Even with an almost empty DOM, the factor is >500. Every loop iteration, the browser has to read the whole page, find the ID and rewrite the page. In your case even twice.

I also made this alternative that you can get a DOM-ready object to handle in javascript.

It performs in about 1 to 3 ms, including rendering into the document.

The parsing function includes additional character handling capability, like making spaces solid and ignoring new lines (or making them into breaks).

// Get a DOM-ready object.
function parseString ( anyString )
{
  // Make into string if not.
  anyString = String(anyString);
  
  // The break-after initial counter value.
  const theCounter = 100;
  
  // The break-after current counter value.
  let myCounter = theCounter;
  
  // The length of the initial string evaluated.
  const theLength = anyString.length; // Math.min(2500, anyString.length;);
  
  // The length of the current string evaluated.
  let myLength = theLength;
  
  // The container for all character containers.
  const newDiv = document.createElement('div');
  
  // The loop through the string.
  while ( -- myLength )
  {
    // The index of the character.
    const theIndex = theLength - myLength - 1;
    
    // The container for the character.
    const newSpan = document.createElement('span');
    {
      let character = anyString[theIndex];
      
      // Handle the character.
      switch ( character )
      {
        // Making spaces solid.
        case ' ':
        {
          newSpan.innerHTML = '&nbsp;';
          break;
        }
        
        // Handling new lines.
        case "n":
        {
          // Break or ignore? Ignoring for the sake of the objective.
          // newSpan.appendChild(document.createElement('br'));
          break;
        }
        
        // Leaving as is.
        default:
        {
          newSpan.textContent = character;
          break;
        }
      }
    }
    
    newDiv.appendChild(newSpan);
    
    // Break after every (theCounter)th character.
    if ( ! -- myCounter )
    {
      myCounter = theCounter;
      newDiv.appendChild(document.createElement('br'));
    }
  }
  
  return newDiv;
}

/*  TESTING  *
*   BELOW   */

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.";

const start = Date.now();
const element = parseString(currentScene);
{
  document.getElementById('testOutput').appendChild(element);
}
const end = Date.now();

console.log
({
    'Time elapsed': ( end - start ) + ' ms',
    'New element': element,
});

#testOutput div
{
  outline: 1px dashed lightblue;
  padding: 5px;
  display: inline-block;
}

#testOutput span
{
  outline: 1px dotted lightgray;
  font-family: monospace;
}

<div id="testOutput"></div>

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – How to decrease CPU usage by an extensive loop?

Answers