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

发布于 2024-08-02 03:31:16 字数 427 浏览 6 评论 0原文

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

I hope this is an easy one, but I've got a page where there's a table with many rows, and the user can decide to view anywhere from fifty per page to the "entire" list which is about 1500 rows. I've noticed that when viewing more rows per page, the "a:hover" style becomes significantly slower. Its not too bad in Firefox/Chrome/Safari but it's very bad in IE7. What's the best way to handle anchor hovering when there are a ton of anchors who use the style?

Here is the CSS I'm currently using for it:


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

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

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

凉栀 2024-08-09 03:31:16

IE 的 DOM 实现一直非常缓慢。 即使使用 DOM,IE8 也比当前任何其他浏览器慢大约 4 到 5 倍。 对网站性能感兴趣的人们已经一次又一次地证明了这一点。

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

如果您所做的事情超出了上面发布的悬停操作(假设您实际上显示/隐藏了一个元素,调整了某些内容的大小),那么这些将触发页面重排,其中必须重新计算整个 DOM,这将是 真的很慢。

IE has always had a very slow DOM implementation. Even IE8 is about 4 or 5 times slower with the DOM than any other current browser. People interested in website performance have proved it over and over again.

The CSS :hover pseudo-selector does require a certain amount of processing by the browser to render it correctly on the correct element. So yeah, IE may be struggling.

If you're doing more than what you've posted above with your hover (say you were actually showing/hiding an element, resizing something) those will trigger page reflows where the ENTIRE DOM has to be recalculated and that'll be REALLY slow.

盛夏尉蓝 2024-08-09 03:31:16

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

My guess is that the problem is not with your CSS, but your 1500 rows! It sounds like you are pushing the limits of the browser. I would stick with pagination, your users will thank you.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文