如何快速加载1000格

Question

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

此想法是创建一个List View，该文件将文件表示为计算机每个文件中的标头（h2）。但是，当有400个或更多文件时，它将变得非常滞后，并且可能在30秒后，整个div都将加载。

CEP面板是在Chrome浏览器上运行的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是一个昂贵的过程