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>

也就是说，除非您的表中有数千个元素，否则可能不必担心。

什么便宜？整个HTML表格的重构还是其行的重新排序？

1 个答案: