gpt4 book ai didi

html - 优化 HTML 表格?

转载 作者:太空狗 更新时间:2023-10-29 14:18:02 28 4
gpt4 key购买 nike

我有一个相当大的 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 开发者工具进行性能测试

所以我决定查看用于调试此问题的开发人员工具。配置文件选项卡并没有让我更进一步,但是当我尝试时间轴事件时,我发现当我将鼠标悬停在一行上时会发生以下情况:

enter image description here

最佳答案

Sooooo,我尝试使用 Chrome 开发者工具中的不同选项卡并运行了审核(如果可以这样说的话)。它表示 foundation.min.css 的 98% |未使用,所以我摆脱了我的 <head> 中的包含.

就是这样!因为我根本没有真正使用 Foundation 中的任何东西,所以我简单地删除了它,CSS 悬停现在就像它们应该的那样即时。

关于html - 优化 HTML 表格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21531269/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com