css - 将鼠标悬停在 anchor 标记上会在长页面上变慢

Question

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

这是我目前使用的 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，这将真的慢。