对于表格数据，什么渲染速度更快，CSS或？<table> </table>

Question

我正在寻找有关当前浏览器的一些统计信息，说明使用普通HTML渲染表所需的时间与使用hack-up CSS清教徒方法避免使用实际TABLE，TR，{{ 1}}等标签。

我不是在寻找什么是正确的，只是为了更快，特别是在Firefox 3上，尽管我也对其他浏览器的统计数据感兴趣。 课程 TABLE标签是为表格设计的。那不是问题。

Answer 1

如果您确实有表格数据，请使用表格。你永远不应该使用表格的想法是对正确概念的错误扩展，你应该只使用html标签用于它们的预期语义目的。这意味着使用CSS进行布局，但将表格用于表格数据。这并不意味着永远不要使用表格。

Answer 2

一般来说，我会说使用＆lt; table＆gt;表格数据。但是，如果表非常长（例如，超过100行）并且列数较少（~3），则使用div来模拟行将导致标记占用空间小得多。如果您使用DOM搜索javascript（由许多JS库提供），这尤其重要，因为它有利于减少DOM树的大小。

这是根据经验，我有一个这样的表，并且正在寻找优化 - 转向基于div的显示将生成的HTML切割为三分之一，这是DOM遍历性能的一个重大改进。

Answer 3

由于某些浏览器会等到整个表格被转移到显示它以确保它们已调整内容大小的列宽，因此如果您正在寻找，使用div可能会更快渲染对于每个浏览器的平均值。

话虽如此，如果你需要一张桌子，请使用一张桌子。

Answer 4

这个问题看起来与此类似： Why not use tables for layout in HTML?所以您可能还想查看其中的一些回复。

通常，浏览器在计算整个表之前不会呈现表，这意味着从用户的角度来看，使用CSS样式代替表时，大表比相同的内容慢。我正在使用一个Web应用程序，它正在使用表来显示状态信息网格，而且显示非常密集且非常慢。使用CSS显示的相同信息更快，更重要的是，在加载时开始逐行显示，而不是等待整个表，因此作为最终用户感觉更快。我建议使用CSS来调查使用样本数据集进行测试来显示数据。这就是我所做的，以确认表格对于我们的特定用例实际上要慢得多。

Answer 5

如果您使用CSS进行布局并且遵循最佳实践并将CSS保存在单独的文件中，那么您的CSS通常只需要在缓存之前下载一次，从而为您提供缓存的好处。 / p>

如果您使用表格进行布局，那么您的布局表格将与每页的HTML一起发送，从而增加了带宽和下载时间。

要提高表格的渲染速度，您可以尝试setting the table-layout:fixed;查看是否有帮助..

Answer 6

不同的浏览器具有完全不同的javascript / css性能，因此很难在此概括。例如，IE7有一个令人震惊的慢速引擎，Chrome的速度令人难以置信。 Firefox介于两者之间，依赖于你是否使用2或3。

Answer 7

我不会把渲染速度作为最重要的方面。 HTML表格用于表格数据。把它放到很多DIV中都是完全错误的。

Answer 8

与上述大多数答案一样，如果您要显示表格数据，我也会说使用表格，如果您想控制布局，则使用DIV（使用CSS3）。 与信仰相反，如果您设置一些属性（如colgroup）并将布局保持为固定，那么表格在渲染时的速度不会低于DIV 。请查看以下链接中的详细信息：

sites.google.com/site/spyderhoodcommunity/xhtml/makingtablesrenderfasterwhenlistingtabulardata

Answer 9

对于表格数据，请使用表格。表格提供了各种不错的功能，例如<thead>和<tfoot>标签，图例，标题，标题等。使桌子成为桌子所需的一切。

此外，如果CSS不起作用/没有加载/无关紧要，那么该表仍然会以它应该的方式运行。

Answer 10

就我个人而言，如果您实际上是在呈现表格数据，那么表格更适合这项任务，我个人认为这是非常正确的。

至于“更快”的原始数字，如@skaffman所说，它取决于浏览器......但要“正确”，将表格用于表格数据是有意义的。