如何快速加载1000个div

Question

我正在为 Adobe 软件开发一个 Adobe CEP 面板，当此 "fetch" 文件来自计算机（同步）时，它会将它们显示为 div 列表。

想法是创建一个 列表视图，将文件表示为计算机每个文件中的 header (h2)。然而，当有400个文件或更多时，它变得非常滞后，大约30秒后，整个div都被加载了。

CEP 面板是一个在 chromium 浏览器上运行的 HTML 文件。

有什么方法可以让它更快吗？也许在文件循环中创建元素的想法效率不高？

只是为了启发那些不熟悉 Adobe CEP 的人，CEP 的一个很酷的想法是它实际上在 Adobe 软件的不同线程上运行，因此这不会阻止用户继续使用软件工具...

任何想法都会对我有用。

这是我创建元素的代码：

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);
        });

谢谢，

Answer 1

您可以尝试使用 map，这将创建一个包含 html 个元素的数组。一旦形成数组，然后使用 join 和逗号分隔符。

最后将所有子项附加到头部一次，因此您不会多次访问 dom，因为访问 dom 是一个代价高昂的过程

Answer 2

根据我的经验，这应该比手动创建每个元素更快：尤其是当标记变得很大时。

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

如果这没有帮助，您可以

a) 将列表分解成更小的块，并在它们之间稍作延迟添加。

b) 查看列表虚拟化

如何快速加载1000个div

how to make fast loading of 1000 divs

html

javascript

adobe

chromium

complex-event-processing