时间戳

首页 > 解决方案 > 如何快速加载 1000 个 div

javascript - 如何快速加载 1000 个 div

问题描述

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

这个想法是创建一个列表视图，将文件表示为计算机每个文件中的标题 (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);
        });

谢谢，

标签： javascripthtmladobechromiumcomplex-event-processing

解决方案

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

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

推荐阅读