CODEWITHSUNDEEP
javascript
Creek Barbara
Creek Barbara

Reputation: 647

My function is taking too long to load

I've a function that add text from a text area to a div, but my problem is that it takes a long time to proceed when I add more than 500 lines. It should work in a second when I add 3000 or 4000 lines, but I don't know what I'm doing wrong. Here is my Add() function:

function add(){
    arraySearchTerms = document.getElementById("searchTerms").value.split('\n');
    for (var i = 0; i < arraySearchTerms.length; i++) {
        document.getElementById("keywords").innerHTML += '<div style="padding: 6px;border-bottom: #b5aeae; border-bottom-style: solid;border-bottom-width: 1px;"><span id="term'+ i +'">' + arraySearchTerms[i] + "</span><span style='float: right;'><img src='Red_Cross.png' height='15' width='11'/></span></div>";
    }   
}

Thank you for your help. Edit: Is it the image? It only weights 2k.

Upvotes: 1

Views: 105

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370819

Every time you assign to innerHTML, the browser has to clear and re-parse the new HTML string. It's a relatively expensive operation compared to most, especially when there are lots of elements inside. Try coming up with the string first, and only assigning to the element's innerHTML at the end:

function add(){
  arraySearchTerms = document.getElementById("searchTerms").value.split('\n');
  let newKeywordHtmlStr = '';
  for (var i = 0; i < arraySearchTerms.length; i++) {
    newKeywordHtmlStr += '<div style="padding: 6px;border-bottom: #b5aeae; border-bottom-style: solid;border-bottom-width: 1px;"><span id="term'+ i +'">' + arraySearchTerms[i] + "</span><span style='float: right;'><img src='Red_Cross.png' height='15' width='11'/></span></div>";
  }
  document.getElementById("keywords").innerHTML += newKeywordHtmlStr;
}

You should also consider using classes rather than giving each element a long inline style attribute, as well as avoiding implicitly creating global variables:

function add(){
  const arraySearchTerms = document.getElementById("searchTerms").value.split('\n');
  let newKeywordHtmlStr = '';
  for (var i = 0; i < arraySearchTerms.length; i++) {
    newKeywordHtmlStr += '<div class="keyword"><span id="term'+ i +'">' + arraySearchTerms[i] + "</span><span><img src='Red_Cross.png' height='15' width='11'/></span></div>";
  }
  document.getElementById("keywords").innerHTML += newKeywordHtmlStr;
}

CSS:

.keyword {
  padding: 6px;
  border-bottom: #b5aeae;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
.keyword > span:nth-child(2) {
  float: right;
}

As comment notes, if the source of arraySearchTerms is untrustworthy and you wish to additionally strip out HTML tags from the arraySearchTerms to ensure it doesn't cause any problems, you can call replace on each item before inserting into the HTML string:

newKeywordHtmlStr += '<div class="keyword"><span id="term'+ i +'">' + arraySearchTerms[i].replace(/<(?:.|\n)*?>/gm, '') + "</span><span><img src='Red_Cross.png' height='15' width='11'/></span></div>";

Upvotes: 4

Related Questions