что дешевле?Реконструкция всей таблицы HTML или переупорядочение ее строк?

Question

У меня есть большая таблица, представленная на странице с данными.Теперь, когда пользователь нажимает на заголовок, мне нужно отсортировать строки.На данный момент у меня есть два варианта.1. Я могу запустить сортировку по данным JavaScript и реконструировать всю таблицу с этим.2. Я могу запустить сортировку по данным JavaScript, но просто перетасовать строки таблицы, которые уже были построены.

Какой путь дешевле с точки зрения эффективности браузера?

TIA.

Answer 1

Манипулирование DOM в целом довольно дорого, как правило.Похоже, что создание элементов с нуля - более дорогой процесс, чем просто перестановка уже существующих элементов.См. Следующий мини-тест производительности:

const trs = document.querySelectorAll('tr');
const table = document.querySelector('table');

const t0 = performance.now();
for (let i = 0; i < 10000; i++) {
  table.appendChild(trs[i % 4]);
  table.appendChild(trs[(1 + i) % 4]);
  table.appendChild(trs[(2 + i) % 4]);
  table.appendChild(trs[(3 + i) % 4]);
}

const t1 = performance.now();

for (let i = 0; i < 10000; i++) {
  table.innerHTML = `
  <tr><td>content 4</td><td>content</td><td>content</td></tr>
  <tr><td>content 3</td><td>content</td><td>content</td></tr>
  <tr><td>content 2</td><td>content</td><td>content</td></tr>
  <tr><td>content 1</td><td>content</td><td>content</td></tr>
  `;
}

const t2 = performance.now();

console.log('Reshuffling:', t1 - t0);
console.log('Creating from scratch:', t2 - t1);

<table>
<tr><td>content 1</td><td>content</td><td>content</td></tr>
<tr><td>content 2</td><td>content</td><td>content</td></tr>
<tr><td>content 3</td><td>content</td><td>content</td></tr>
<tr><td>content 4</td><td>content</td><td>content</td></tr>
</table>

Тем не менее, если в вашей таблице нет тысяч элементов, то, вероятно, не о чем беспокоиться.