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

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 行！听起来您正在挑战浏览器的极限。我会坚持分页，你的用户会感谢你的。