如何快速加载1000个div

how to make fast loading of 1000 divs

我正在为 Adob​​e 软件开发一个 Adob​​e CEP 面板,当此 "fetch" 文件来自计算机(同步)时,它会将它们显示为 div 列表。

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

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

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

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

任何想法都会对我有用。

这是我创建元素的代码:

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

谢谢,

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

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

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

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) 查看列表虚拟化