什么HTML结构对浏览器性能表现更好？

Question

嗯，普遍意见似乎是：我们应该只将表格用于表格数据，而不是布局。

好的，我同意并理解原因（其中一个原因是性能）。

• 但有人可以提供比较表格和其他结构的实际基准吗？
• 那么哪种结构对浏览器性能最好呢？

- Daniel Peñalba

---

https://dev59.com/K3VD5IYBdhLWcg3wHnwX - haha

我真的很想知道人们在试图创建什么样的不可能复杂的布局时，他们为什么如此渴望使用表格。CSS 可以实现任何布局！停止考虑表格。 - Šime Vidas

Answer 1

您不需要真的进行基准测试..您可以从视觉上看出差异。如果您查看一个没有css布局的网站，它通常渲染速度较慢，因为表格必须完全绘制出来。当使用css分割时，速度明显更快。我在许多网站上见过这种情况，它们在转换为css布局之前。

此外，表格几乎需要为所有内容提供单元格和行。通过不依赖于行/单元格，您可以大大减少代码膨胀。

"最佳结构"？没有最佳结构。这完全取决于布局。虽然通常，您希望避免divitus并尽可能简洁地标记语义化。

- meder omuraliev

Answer 2

我一直听到的使用 divs 而不是 tables 的主要原因是适应性。如果你使用表格布局，你必须更改所有的 HTML 才能更改它，但是使用 divs，你只需要使用 layout、float 和 position CSS 属性来移动元素即可。

- Brendan Long

Answer 3

表格的主要性能问题在于它们可能会引起过度回流。表格中第一个单元格的布局可能会受到后面单元格中内容的影响，这基本上让浏览器不得不返回并重新开始布局。

- robertc

Answer 4

我非常喜欢这个网站，它可以为你提供一个计时器，告诉你在使用纯CSS之前应该挣扎多长时间...

http://giveupandusetables.com/

- Will