css - 将鼠标悬停在锚标签上会减慢长页面的速度

Question

我希望这是一个简单的页面，但是我有一个页面，其中有一个包含许多行的表格，用户可以决定查看从每页 50 个到大约 1500 行的“整个”列表的任何位置。我注意到，当每页查看更多行时，“a:hover”样式会显着变慢。它在 Firefox/Chrome/Safari 中并不算太糟糕，但在 IE7 中却非常糟糕。当有大量使用该样式的锚时，处理锚悬停的最佳方法是什么？

这是我目前使用的 CSS：

a.brochurelink{
color:#000000;
font-weight:bold;
text-decoration:none;
}

a.brochurelink:visited{
color:#9900BD;
}

a.brochurelink:hover{
text-decoration:underline;
color:#0000FF;
}

Answer 1

IE 的 DOM 实现一直很慢。甚至 IE8 使用 DOM 的速度也比当前任何其他浏览器慢 4 到 5 倍。对网站性能感兴趣的人已经一次又一次地证明了这一点。

CSS :hover 伪选择器确实需要浏览器进行一定量的处理才能在正确的元素上正确呈现它。所以，是的，IE 可能正在苦苦挣扎。

如果您的悬停操作超出了您在上面发布的内容（例如您实际上是在显示/隐藏一个元素，调整某些内容），那么这些将触发页面重排，其中必须重新计算整个 DOM，这真的很慢.

Answer 2

我的猜测是问题不在于您的 CSS，而在于您的 1500 行！听起来您正在挑战浏览器的极限。我会坚持分页，你的用户会感谢你的。