Моя функция загружается слишком долго

Question

Моя функция загружается слишком долго

1

У меня есть функция, которая добавляет текст из текстовой области в div, но моя проблема в том, что для добавления более 500 строк требуется много времени. Он должен работать через секунду, когда я добавляю 3000 или 4000 строк, но я не знаю, что я делаю неправильно. Вот моя функция Add():

function add(){
    arraySearchTerms = document.getElementById("searchTerms").value.split('\n');
    for (var i = 0; i < arraySearchTerms.length; i++) {
        document.getElementById("keywords").innerHTML += '<div style="padding: 6px;border-bottom: #b5aeae; border-bottom-style: solid;border-bottom-width: 1px;"><span id="term'+ i +'">' + arraySearchTerms[i] + "</span><span style='float: right;'><img src='Red_Cross.png' height='15' width='11'/></span></div>";
    }   
}

Спасибо за помощь. Изменение: Это изображение? Он только весит 2k.

Creek Barbara 16 июль 2018, в 06:49

Источник

1

«Это должно сработать за секунду, когда я добавлю 3000 или 4000 строк» Откуда у вас такое впечатление? Вы выполняете операцию DOM для каждого элемента, и операции DOM являются одной из самых медленных операций, которые вы могли бы выполнить.
Claies 16 июль 2018, в 04:01

Теги:

javascript

1 ответ

Ещё вопросы

«Это должно сработать за секунду, когда я добавлю 3000 или 4000 строк» Откуда у вас такое впечатление? Вы выполняете операцию DOM для каждого элемента, и операции DOM являются одной из самых медленных операций, которые вы могли бы выполнить.

CertainPerformance · Accepted Answer · 2018-07-16T02-17-00.000Z

Каждый раз, когда вы назначаете innerHTML, браузер должен очистить и повторно проанализировать новую строку HTML. Это относительно дорогостоящая операция по сравнению с большинством, особенно когда в ней много элементов. Попробуйте сначала придумать строку, и только присвойте элементу innerHTML в конце:

function add(){
  arraySearchTerms = document.getElementById("searchTerms").value.split('\n');
  let newKeywordHtmlStr = '';
  for (var i = 0; i < arraySearchTerms.length; i++) {
    newKeywordHtmlStr += '<div style="padding: 6px;border-bottom: #b5aeae; border-bottom-style: solid;border-bottom-width: 1px;"><span id="term'+ i +'">' + arraySearchTerms[i] + "</span><span style='float: right;'><img src='Red_Cross.png' height='15' width='11'/></span></div>";
  }
  document.getElementById("keywords").innerHTML += newKeywordHtmlStr;
}

Вы также должны рассмотреть использование классов, а не придавать каждому элементу длинный встроенный атрибут style, а также избегать неявного создания глобальных переменных:

function add(){
  const arraySearchTerms = document.getElementById("searchTerms").value.split('\n');
  let newKeywordHtmlStr = '';
  for (var i = 0; i < arraySearchTerms.length; i++) {
    newKeywordHtmlStr += '<div class="keyword"><span id="term'+ i +'">' + arraySearchTerms[i] + "</span><span><img src='Red_Cross.png' height='15' width='11'/></span></div>";
  }
  document.getElementById("keywords").innerHTML += newKeywordHtmlStr;
}

CSS:

.keyword {
  padding: 6px;
  border-bottom: #b5aeae;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
.keyword > span:nth-child(2) {
  float: right;
}

В примечаниях к комментариям, если источник arraySearchTerms недостоверен, и вы хотите дополнительно исключить HTML-теги из arraySearchTerms чтобы убедиться, что он не вызывает никаких проблем, вы можете вызвать замену на каждый элемент перед вставкой в строку HTML:

newKeywordHtmlStr += '<div class="keyword"><span id="term'+ i +'">' + arraySearchTerms[i].replace(/<(?:.|\n)*?>/gm, '') + "</span><span><img src='Red_Cross.png' height='15' width='11'/></span></div>";

Спасибо. Это прекрасно работает. Я должен был подумать об этом.
-1 для введения произвольных данных в контекст HTML. Это потенциальная угроза безопасности и может привести к повреждению HTML, а также к тому, что текст не будет экранирован.
@Brad Почему вы обвиняете ответ за то, что делает спрашивающий? Хотя это действительно так, к нему следует обратиться в комментарии к вопросу. Глупо ожидать, что мы сделаем их код идеальным, а также ответим на вопрос, не говоря уже о том, что это ненужно и отвечает больше, чем нужно.
@SpencerWieczorek Имейте в виду, что люди постоянно копируют / вставляют код из Stack Overflow. Суть этого конкретного вопроса, по сути, заключается в следующем: «Как я могу вставить кучу данных в кучу HTML, а затем вставить их в страницу». Один из способов сделать это надлежащим образом - это раскрутить элементы и задать их текст и другие свойства перед добавлением в документ. Вы обнаружите, что производительность сопоставима с методом concat-a-Связка-HTML-и-дерьмо вместе. В любом случае метод конкатенации хорош, если отвечающему человеку потребуется 20 секунд и добавится соответствующий выход.
@Brad Это понятно, и да, я знаю правильный способ сделать это. Хотя я согласен, что это то, что следует упомянуть в комментарии или отметить в ответе, до такой степени, что утверждать, что этот вопрос бесполезен, и давать -1 кажется ненужным.
Не надо драться с парнями. Я просто тестирую функцию и не думаю о безопасности. Я согласен, что это должен быть рефлекс. Спасибо вам обоим
@SpencerWieczorek Я также очень рад удалить понижение, если ответ будет исправлен.
@Brad Спасибо. По какой - то причине , я был под впечатлением , что тысячи appendChild s будет довольно дорого по сравнению с установкой одной большой строки HTML все сразу (поэтому я не упоминал об этом в ответе), но на самом деле это не так уж плохо. Простой бенчмарк кажется на 3-6 раз медленнее jsfiddle.net/bjfxck86 (предупреждение: браузер немного заблокируется)
@CertainPerformance В идеале используйте фрагмент документа, чтобы одновременно добавлялся только один большой фрагмент.