为啥固定元素会减慢 Firefox 中的滚动速度?

Posted

技术标签:

【中文标题】为啥固定元素会减慢 Firefox 中的滚动速度?【英文标题】:Why do fixed elements slow down scrolling in Firefox?为什么固定元素会减慢 Firefox 中的滚动速度? 【发布时间】:2010-09-09 05:11:47 【问题描述】:

为什么应用了 CSS position: fixed 的元素会导致 Firefox 在滚动它们所在的页面时占用 100% 的 CPU?有什么解决方法吗?

我在一些网站上注意到了这种行为,例如 *** 页面顶部的通知栏。我正在使用 Linux 以防万一。

【问题讨论】:

【参考方案1】:

这是bug #201307。

【讨论】:

【参考方案2】:

这是bugzilla中报告的错误

显然,一个解决方法(成功的报告参差不齐..)是disable smooth-scrolling

只需在“编辑”>“首选项”>“高级”中禁用平滑滚动即可。

【讨论】:

【参考方案3】:

如前所述,这是错误#201307。解决方法是禁用平滑滚动:

编辑 -> 首选项 -> 高级 -> 常规选项卡 -> 取消选中“使用平滑​​滚动”

【讨论】:

【参考方案4】:

这个网站有一个固定的元素“第一次在 Stack Overflow?查看常见问题解答!”,它在 Firefox 中非常慢。不过在 Opera 和 Chrome 上效果更好。 FF3、Windows XP、ATI。

【讨论】:

【参考方案5】:

它会占用 CPU,因为浏览器必须在每次滚动更改时重新绘制整个视口,而不仅仅是新的可见区域

【讨论】:

【参考方案6】:

您确定这里有直接链接吗?您是否创建了带有固定元素的静态 html 页面来验证您的理论?考虑到这些 CSS 属性的使用范围有多广,我想现在其他人会注意到它,无论您运行的是什么浏览器/操作系统。

【讨论】:

以上是关于为啥固定元素会减慢 Firefox 中的滚动速度?的主要内容,如果未能解决你的问题,请参考以下文章

为啥有些列会减慢查询速度

在 cellForRowAtIndexPath 从 CoreData 加载图像会减慢滚动速度

UITableViewCell 中嵌套的 UIStackViews,会减慢滚动速度,降低性能。如何提高性能?

UTF-8 内容类型元标记会减慢页面加载速度,为啥?

为啥这个脚本会随着输入量的增加而减慢每个项目的速度?

为啥 MYSQL 更高的 LIMIT 偏移量会减慢查询速度?