Question

我有一个很大的HTML表格（2000多行），我注意到我使用的悬停似乎没有响应（需要大约1秒才能触发）。

#songs tbody tr:hover td { color: #1abc9c; }

我需要在DOM中加载所有元素的表。它们本身不一定是可见的，所以延迟加载是一种选择，但是当用户滚动到底部时，他仍然会遇到问题。

有没有办法优化HTML（表格），我应该注意什么？

修改

我决定在其他浏览器中试用它，Firefox似乎根本没有任何问题，IE10也没有。所以这是我在Chrome中遇到的一个问题。

<tr data-playlist="/edm" data-filename="Chuckie - Together (Original Mix).mp3" class="song match">
    <td>Together (Original Mix)</td>
    <td>Chuckie</td>
</tr>

另请注意，它不是关于页面加载，而是在一秒钟内加载。问题是Chrome中的CSS .song:hover。

编辑2：使用Chrome开发人员工具进行性能测试

所以我决定看一下Developer工具来调试这个问题。 “个人档案”标签没有让我更进一步，但是当我尝试时间轴事件时，我发现当我将鼠标悬停在一行上时会发生以下情况：

enter image description here

Answer 1

Sooooo，我尝试使用Chrome开发者工具中的不同标签并运行审核（如果可以这样说）。它表示98％的foundation.min.css未被使用，因此我删除了<head>中的包含。

就这样做了！由于我根本没有真正使用基金会的任何东西，所以我只是删除了它，而且CSS徘徊现在就像他们应该的那样。

Answer 2

这不是一个真正的答案，而是一些“原始”数据。因此，如果mod认为不合适，请告诉我，我会删除它。

这个问题对我来说非常有趣，因为CSS HTML和JS“开销”的问题（这就是我询问任何附加的CSS或JS的原因）。

在THIS页面上，作者对div与表的加载时间进行了比较，发现没有显着差异。那么，CSS vs JS开销呢？

所以，由于我的神经症，我把2000行表放在一起并上传到我的网站。没什么花哨的，空桌子。然后添加样式以更改第三个td上的背景颜色：

table {
     width: 500px;
     margin: 10px auto;
     border-collapse: collapse;
}
table td {
     width: 30%;
     height: 20px;
     border: 1px solid black;
     border-collapse: collapse;
} 
table td:last-child {
     background-color: red;
}

然后在IE9模式下使用F12工具，给出了以下数据：

HTTP request: 73.16ms
Style calculation 12.35ms
Style paint 0.5ms

然后删除了最后一个CSS样式，并在最后添加了以下JS，其中包含jQuery，jQuery UI和jQuery CSS样式表 - 与之前的CSS“相似”：

$('table tr td:last-child').mouseover(function(){
    $(this).css('background-color', 'red');
    });
$('table tr td:last-child').mouseout(function(){
    $(this).css('background-color', 'transparent');
    });

获得以下数据：

HTTP request: 252.25ms
Mouseover: 0.54ms
Layout: 18.7ms
Paint: 1.01ms
Mouseout: .38ms
Style: 0.066ms

所以没有真正的惊喜 - 由于加载jQuery的东西，HTTP请求更多的是三倍。

用CSS 12.85ms“绘制”td的总时间，jQuery为20.7ms。

但不是一个巨大的差异。

我在这个网站上了解到，只要有可能，就可以在CSS中完成所有工作。我猜主要是为了浏览器目的。但至少有一些时间优势的对象证据（同样，毫不奇怪）。

很好的问题，Cas！

Answer 3

您可能需要查看the JavaScript performance tools built into Chrome。

1秒的超时有点长，特别是对于Chrome。我的猜测是你不期望发生的其他事情。除非每个单元本身包含半兆字节的HTML，否则具有2000多行的表应该不是问题： - ）

也就是说，要优化表，可以为每个表列分配固定宽度。您可以通过为表中的每个th / td提供一个具有固定宽度的类来使用CSS。请参阅此问题：Set the table column width constant regardless of the amount of text in its cells?

这将有助于浏览器优化渲染。但我怀疑这对你的情况有帮助（固定列宽通常只在初始页面渲染过程中有用）。

优化HTML表格？

3 个答案: