优化HTML表格？
我有一个相当大的HTML表格（2000+行），我注意到我使用的悬停看起来真的没有反应（大约需要1秒钟才能触发）。
#songs tbody tr:hover td { color: #1abc9c; }
我需要将表格加载到DOM中的所有元素。 它们本身不必是可见的，所以懒加载是一种选择，但是当用户滚动一下到底时，他仍然会遇到问题。
有什么方法可以优化HTML（表格），我应该注意什么？
编辑
我决定尝试在其他浏览器中使用Firefox，并且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>
另外请注意，这不是关于页面加载，它在一秒钟内加载。 问题是CSS .song:hover在Chrome中。
编辑2：使用Chrome开发人员工具进行性能测试
所以我决定看看Developer工具来调试这个问题。 配置文件选项卡并没有让我更进一步，但是当我尝试时间线事件时，我发现当我将鼠标悬停在一行上时会发生以下情况：
Sooooo，我尝试使用Chrome开发人员工具中的不同选项卡并运行审核（如果可以这样说）。 它表示， foundation.min.css 98％未被使用，所以我在我的<head>删除了包含。
那就做到了！ 由于我根本没有真正使用基金会的任何东西，所以我只是简单地将其删除，现在CSS悬停就像他们应该的那样。
这不是一个真正的答案，而是一些“原始”数据。 所以如果mods认为它不合适，请让我知道，我会删除它。
这个问题对我来说非常有趣，因为CSS HTML和JS“开销”的问题（这就是为什么我问任何附加的CSS或JS）。
在这个页面上，作者对divs和表格的加载时间进行了比较，发现没有显着差异。 那么，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！
您可能想看看Chrome内置的JavaScript性能工具。
1秒的超时时间有点长，特别是对于Chrome。 我的猜测是，别的事情发生，你不期望。 一个包含2000多行的表应该不会成为问题，除非每个单元本身都包含半个兆字节的HTML :-)
也就是说，要优化表格，您可以为每个表格列指定一个固定的宽度。 你可以通过给表中的每个th / td一个固定宽度的类来做到这一点。 看到这个问题：无论单元格中的文本数量如何，设置表格列的宽度是常量？
这将有助于浏览器优化渲染。 但我怀疑这会对你的情况有所帮助（固定列宽通常只在初始页面渲染期间提供帮助）。
链接地址: http://www.djcxy.com/p/77167.html