Javascript 如何快速加载1000个div

我正在为Adobe软件开发一个AdobeCEP面板，当从计算机“获取”文件（同步）时，它会将它们显示为div列表

其思想是创建一个列表视图，该视图将文件表示为计算机每个文件中的头（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);
        });

---

谢谢，

您可以尝试使用

map

创建一个html元素数组。数组形成后，使用带有逗号分隔符的

连接

---

最后，在头部附加所有子元素一次，这样您就不会多次访问dom，因为访问dom是一个代价高昂的过程

您可以尝试使用

map

创建一个html元素数组。数组形成后，使用带有逗号分隔符的

连接

---

最后，在头部一次附加所有子元素，因此您不会多次访问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")}`

fontDiv.innerHTML=`
@字体{
字体系列：“Ariel”；
}
${filesArray.map（元素=>{
var fileName=element.slice（0，element.length-4）；
var fileID=makeFileid（）；
返回`
${fileName}
计算机的文件
`
}).join（“\n”）}`

如果这没用，你可以

a） 将列表分解成更小的块，并添加它们，中间有一点延迟

---

b） 签出列表虚拟化

根据我的经验，这应该比手动创建每个元素更快： 特别是当标记达到一个显著的大小时

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

fontDiv.innerHTML=`
@字体{
字体系列：“Ariel”；
}
${filesArray.map（元素=>{
var fileName=element.slice（0，element.length-4）；
var fileID=makeFileid（）；
返回`
${fileName}
计算机的文件
`
}).join（“\n”）}`

如果这没用，你可以

a） 将列表分解成更小的块，并添加它们，中间有一点延迟

---

b） 签出列表虚拟化

您真的需要一次加载所有内容吗？一次加载所有内容不是最好的方法。你真的需要一次加载所有内容吗？一次加载所有内容并不是最好的方法