优化HTML表格？
Cas*_*sen 7 html css performance
我有一个很大的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>
另请注意,它不是关于页面加载,而是在一秒钟内加载.问题是.song:hoverChrome中的CSS .
编辑2:使用Chrome开发人员工具进行性能测试
所以我决定看一下Developer工具来调试这个问题."个人档案"选项卡没有让我更进一步,但是当我尝试时间轴事件时,我发现当我将鼠标悬停在一行上时会发生以下情况:
Sooooo，我尝试使用 Chrome 开发人员工具中的不同选项卡并进行了审核（如果可以这样说的话）。它指出 98%foundation.min.css未使用，因此我删除了我的<head>.
就这样完成了！由于我根本没有真正使用 Foundation 中的任何内容，因此我只是将其删除，CSS 悬停现在就像应有的那样是即时的。
- 有趣的。要弄清楚发生了什么，您可以再次添加包含。将鼠标悬停在表格行上时，开发人员工具将显示哪些样式应用于表格。这应该会让您了解哪些样式可能需要如此多的性能。我认为 Chrome 开发人员会对这样的错误报告感兴趣。 (2认同)