实际表与。分区表答案

【问题标题】：Actual table Vs. Div table实际表与。分区表
【发布时间】：2011-02-06 18:07:52
【问题描述】：

这个

<table>
    <tr>
        <td>Hello</td>
        <td>World</td>
    </tr>
</table>

可以这样做：

<div>
    <div style="display: table-row;">
        <div style="display: table-cell;">Hello</div>
        <div style="display: table-cell;">World</div>
    </div>
</div>

现在，这两者在性能和/或渲染速度方面有什么区别，还是一样？

【问题讨论】：

表格让布局成为可能，而 div 让布局成为不可能。表格使代码易于阅读、易于理解。 Div 需要大量不那么容易理解的骇客和技巧，即使这样，结果也是如此，并且充满了不受欢迎的行为。
如果你用 DATA 填充这个表？是的，使用表格。您是否使用它来布局您的网站？不要 使用表格！ Div 用于网站内容/布局，表格是一个过时的元素，其唯一目的是很好地布置数字/数据。

标签： css performance html html-table

【解决方案1】：

使用 div 模拟数据表在语义上是不正确的，并且通常与性能无关，因为渲染是即时的。瓶颈来自 JavaScript 或带有大量嵌套元素的超长页面，在过去通常是 100 个嵌套表格来创建布局。

使用表格来实现它们的用途，使用 div 来实现它们的用途。显示表格行和单元格属性更多地利用 div 布局，而不是为数据表示创建表格。将它们视为与报纸或杂志中相同的布局列和行。

在 div 示例中，您有更多的字节数，哈哈 :)

【讨论】：

您对响应能力有何看法？因为除了添加水平滚动条之外，没有任何表格元素是远程响应的
@PirateApp 你的意思是响应不同的屏幕尺寸？数据表也可以拉伸或使用正确的样式包装内容。如果它是一个实际的数据表 - 你应该使用唯一的东西 - 这就是你想要的。

【解决方案2】：

首先，我不担心性能，而更关心语义。如果是表格数据，请使用<table>。如果只是表示布局元素的块元素，请使用<div>。

如果您真的非常担心性能，那么答案仍然取决于所使用的客户端。例如，众所周知，MSIE 在表格呈现方面很慢。您至少应该在不同的浏览器中测试自己。

如果这种担心是由大数据引起的，那么我会考虑对您将要显示的数据进行分页/过滤。

【讨论】：

【解决方案3】：

只是在性能主题上投入我的两分钱。对于小型（例如 100 行以下）表，使用 DIV 不会对性能产生太大影响。

另一方面，如果您想生成非常长的数据集，则绝对应该使用传统的 HTML 表格。

简要说明：

这一切都源于我公司的项目，在那里我编写了一个 Javascript 类来根据 SQL 数据（它是一种报告类型的模块）以程序方式为我生成表格。无论如何，我喜欢 DIV，所以我将它写成基于 DIV，就像 OP 示例一样。

在经历了一些可怕的表现（尤其是在 IE8 中）之后，我决定只使用表格来重写它，因为总的来说它是非常简单的表格数据。无论出于何种原因，在我的 Chrome 机器上，表格的速度大约是其两倍。 Safari 也是如此。

也就是说，由于我无法提供我的工作代码，所以我编写了一个小基准测试，让您尝试其中一个或方法。您会看到它们几乎相同，只有一个使用带有样式的 div 来模仿表格的标准行为，而另一个只是一张老式的桌子。

唯一真正的区别是生成的元素的类型，所以这是我在时间增量中唯一可以考虑的事情。我确定它因浏览器而异，但在我看来，表格元素似乎更快。

<script type="text/javascript">
var time_start = new Date().getTime();
var NUM_ROWS = 5000;
var NUM_CELLS = 8;
var OLD_STYLE = 1; // toggle 0/1, true/false
if(OLD_STYLE)
{
    var table = document.createElement('table');
    document.body.appendChild(table);
    for(var a = 0; a < NUM_ROWS; a++)
    {
         var row = document.createElement('tr');
         for(var b = 0; b < NUM_CELLS; b++)
         {
             var cell = document.createElement('td');
             cell.innerHTML = 'cell';
             row.appendChild(cell);
         }
         table.appendChild(row);
     }
}
else
{
    var table = document.createElement('div');
    document.body.appendChild(table);
    for(var a = 0; a < NUM_ROWS; a++)
    {
        var row = document.createElement('div');
        row.setAttribute('style','display: table-row; padding: 2px;')
        for(var b = 0; b < NUM_CELLS; b++)
        {
            var cell = document.createElement('div');
            cell.setAttribute('style','display: table-cell; padding: 2px');
            cell.innerHTML = 'cell';
            row.appendChild(cell);
        }
        table.appendChild(row);
    }
}
var dt = (new Date().getTime() - time_start)/1000;
console.log( dt + ' seconds' );
</script>

【讨论】：

原因可能是setAttribute 调用。你能做一个注入 HTML 的测试吗？另请注意，您测量的是创建速度，而不是渲染速度。
你有理由相信“注入”HTML 会比直接操作 DOM 更快吗？另外，您会注意到，我在制作节点时会附加这些节点，所以您可能会说它同时测量了创建和渲染？
“我在创建节点时附加节点”——这大大减慢了速度。相反，您应该首先构建表格，然后将其附加到文档中。否则，影响文档的每个更改都会导致浏览器再次重新计算布局。如果你先建表/仿表，然后在完成后将其附加到文档中，时间差是多少？
我无法判断出可衡量的差异。速度上最大的区别确实是setAttribute。徒劳无功，我尝试将其更改为直接分配而不是 setAttribute（例如 cell.style.display = 'table-cell';），似乎没有区别。如果我不为 DIV 分配任何样式，它的执行速度与表格一样快——这是意料之中的，因为它只是创建了表格之类的标签。另一方面，如果您不对 div 应用样式，则不会重现表格效果。
嗯...另一个想法：如果您将style 属性设置为字符串，它必须将整个值解析为CSS。尝试设置style.display（字符串）和style.padding（如果是数字，则以像素为单位）。

【解决方案4】：

您真的不应该担心表格渲染的性能。即使有一个，您也不会注意到它，直到有数百（数千？）表要显示。使用你觉得对你更舒服的东西。

【讨论】：

【解决方案5】：

我想提一下，如果您使用表结构而不是 div，则用户可以按住 CMD（或 Windows 中的 ALT）从表中选择某个数据区域进行复制。该数据还可以很容易地粘贴到 Excel 和其他类似的工作簿程序中。

【讨论】：

【解决方案6】：

关于这个有很多讨论，而 div 表通常会因为它在样式上的灵活性而占上风。这是一个链接 - http://css-discuss.incutio.com/wiki/Tables_Vs_Divs

【讨论】：

我无法访问这篇文章中的链接，我想访问，因为我是这个主题的新手，想使用正在讨论的面向div 的技术。我可以使用其他参考吗？

【解决方案7】：

在下载所有标记之前，不会呈现表格。而单个 div 将在其标记下载后立即呈现。我猜总时间会是一样的，但是 div 会让人感觉更好的性能和更快的响应能力。

【讨论】：

如果table-layout 设置为fixed，则不是这样。
我猜是遗留代码，即使是像谷歌这样的网站布局的最小变化也很难。人们说 - 如果它有效，请不要改变它。
这取决于浏览器。 Firefox 将逐步呈现表格，但 IE 不会。 blogs.msdn.com/ie/archive/2005/02/10/370721.aspx
那么<thead>、<tfoot> 和<tbody> 标签呢？我在某处读到，表格的呈现正在改进，因为现代浏览器首先识别并呈现<thead> 和<tfoot> 内容
@IvayloSlavov thead 和 tfoot 主要用于打印它们应该显示在每页顶部和底部的位置（如果相关表格长于一页）。

【解决方案8】：

在我看来，使用 div 的唯一原因是根据浏览器大小设置样式和调整布局。如果它没有损坏，请不要修复它。尽管使用 css，但 Div 更容易设置样式。

表：优点 - 你可以得到一个非常复杂的布局，正是你想要的。更可靠。有时，复杂的 CSS 样式会变得有点奇怪。不适合负责任的网站。

Divs：可以根据浏览器输入进行调整，更灵活，更容易设置样式。

【讨论】：

【解决方案9】：

如果您要呈现表格数据，那么您应该使用表格 - 它以及相关元素具有表示数据表格所需的所有语义。乱七八糟的 div 一个都没有。

【讨论】：