как сделать быструю загрузку 1000 делений - PullRequest
Новая
       52

как сделать быструю загрузку 1000 делений

0 голосов
/ 04 мая 2020

Я занимаюсь разработкой панели Adobe CEP для программного обеспечения Adobe, и когда она «выбирает» файлы с компьютера (синхронно), она показывает их в виде списка элементов div.

Идея заключается в создании списка , который представляет файлы в виде заголовка (h2) в каждом файле компьютера. Однако, когда существует 400 файлов и более, это становится очень запаздывающим, и, возможно, через 30 секунд загружаются целые div.

Панель CEP представляет собой файл HTML, который запускается в браузере Chromium.

Есть ли способ сделать это быстрее? может быть, идея создания элемента в al oop поверх файлов неэффективна?

Просто чтобы просветить тех, кто не знаком с 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);
        });

Спасибо,

Ответы [ 2 ]

1 голос
/ 04 мая 2020

По моему опыту, это должно быть быстрее, чем создание каждого отдельного элемента вручную, особенно если разметка достигает значительного размера. 

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

Если это не поможет, вы можете

а) разбить список на более мелкие куски и добавить их с небольшой задержкой между ними.

б) проверить виртуализацию списка

1 голос
/ 04 мая 2020

Вы можете попробовать использовать map, и это создаст массив из html элементов. После того, как массив сформирован, используйте join с запятой.

В конце добавьте все дочерние элементы один раз в голову, чтобы вы не обращались к dom несколько раз, так как доступ к dom - дорогостоящий процесс

...