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

时间:2009-08-11 15:16:21

标签: css hover

我希望这是一个简单的,但我有一个页面,其中有一个包含许多行的表,用户可以决定查看从每页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;
}

2 个答案:

答案 0 :(得分:2)

IE总是有一个非常慢的DOM实现。甚至IE8的DOM也比其他任何当前浏览器慢约4或5倍。对网站性能感兴趣的人已经一遍又一遍地证明了这一点。

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

如果你做的不仅仅是你在悬停上发布的内容(假设你实际显示/隐藏了一个元素,调整了一些内容),那么这些将触发页面重排,其中必须重新计算整个DOM,并且真的慢。

答案 1 :(得分:0)

我的猜测是问题不是你的CSS,而是你的1500行!听起来你正在推动浏览器的极限。我会坚持使用分页,你的用户会感谢你。