Шаблоны для эффективной работы с DOM с помощью современного чистого JavaScript

[CoolCmd]

[cardTitle.textContent, cardBody.textContent] = [title, body];

зачем нужно делать подобные хитрожопые конструкции?

const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  fragment.appendChild(li);
}
document.getElementById('myList').appendChild(fragment);

Данный подход позволяет избежать частых перекомпановок и обновлений, поскольку все новые элементы добавляются в DOM за один раз, а не по отдельности.

в приведенном примере в любом случае не будет "частых перекомпоновок и обновлений", поэтому вставка в DocumentFragment добавит накладных расходов и уменьшит (а не увеличит) производительность.

[Pubert]

Разве при appendElement перекомпоновка не происходит автоматом? Или добавлена оптимизация на такой случай?

[GlazOtca]

Спасибо за AbortController, удаляющий все обработчики разом. Раньше использовал его для отмены сетевых запросов только.