how to make fast loading of 1000 divs

Question

I am developing an Adobe CEP panel for Adobe software, and when this "fetch" files from a computer (synchrony), it shows them as list of divs.

The idea is to create a List View that represents the files as a header (h2) in every file of the computer. However, when there are 400 files and more, it becomes very lagging, and after maybe 30 seconds, the whole divs are loaded.

The CEP panel is an HTML file that runs on chromium browser.

Is there any way to make it faster? maybe the idea of creating element in a loop over the files is not efficient?

Just to enlighten those who doesn't familiar with Adobe CEP, the cool idea of the CEP that it actually runs on a different thread of the Adobe software, thus this does not stuck the user from continuing using the software tools...

Any ideas will be useful for me.

here is my code of creating the elements:

filesArray.forEach( element => {
          var fileName = element.slice(0,element.length-4)
          var fileID = makeFileid();
          var div = document.createElement("div");
          div.setAttribute("style", "border-bottom: 1px solid #9B9B9B")
          div.setAttribute("class", "fonts");
          div.classList.add("row");
          var div2 = document.createElement("div");
          div2.classList.add("column");
          var h3 = document.createElement("h3")
          h3.setAttribute("class" , "h3");
          var h2 = document.createElement("h2");
          h2.setAttribute("style" , "margin-right: 10px; font-size: 20px");
          h2.setAttribute('id', element)
          h2.setAttribute("onclick", "sayWho(this)")
          div.appendChild(div2);
          div2.appendChild(h3)
          div2.appendChild(h2);
          fontDiv.appendChild(div);
          h3.innerText = fileName;
          h2.innerText = 'The files of the computer';
          var newStyle = document.createElement('style');
          newStyle.appendChild(document.createTextNode('\
          @font-face {\
              font-family:"Ariel";\
          ));
          document.head.appendChild(newStyle);
        });

Thanks,

Answer 1

In my experience, this should be faster than manually creating every single element: especially if the markup gets to a significant size.

fontDiv.innerHTML = `<style>
  @font-face {
    font-family: "Ariel";
  }
</style>

${filesArray.map(element => {
  var fileName = element.slice(0, element.length - 4);
  var fileID = makeFileid();

  return `<div class="fonts row"
     style="border-bottom: 1px solid #9B9B9B">
  <div class="column">
    <h3 class="h3">${fileName}</h3>
    <h2 id="${element}"
        style="margin-right: 10px; font-size: 20px"
        onclick="sayWho(this)">
      The files of the computer
    </h2>
  </div>
</div>`
}).join("\n")}`

If this doesn't help, you can

a) break the list down into smaller chunks and add them with a small delay in between.

b) check out list virtualization