我的固定背景使网站滚动很慢，我能做些啥来改善它？

Posted 2023-02-23

技术标签:

【中文标题】我的固定背景使网站滚动很慢，我能做些啥来改善它？【英文标题】：My fixed background made scrolling the site very slow, what can I do to improve it?我的固定背景使网站滚动很慢，我能做些什么来改善它？ 【发布时间】：2011-10-25 10:15:01 【问题描述】：

我使用下面的 CSS 更改了论坛的背景

http://forum.antinovaordemmundial.com

html 
    background: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg) no-repeat center center fixed;
    background-image: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg);
    background-repeat-x: no-repeat;
    background-repeat-y: no-repeat;
    background-attachment: fixed;
    background-position-x: 50%;
    background-position-y: 50%;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

图片为 1600x711 和 88k。页面的滚动现在非常慢。 CSS 有问题还是图像应该更小？

编辑：我尝试更改为：

body         
    color: #000;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 13px;
    text-align: center; /* IE 5 fix */
    line-height: 1.4;
    background-attachment: fixed;
    background-clip: initial;
    background-color: #51010E;
    background-image: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg);
    background-origin: initial;
    background-position: initial initial;
    background-repeat: initial initial;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;

但是滚动还是很慢。

【问题讨论】：

我使用的是 chrome，但我也尝试使用 firefox。对我来说并不慢或迟钝（Chrome 13）我在 Chrome 13 中遇到了一些延迟，并且在滚动时会导致大量 CPU 使用。如果删除背景图像，问题会消失吗？ +1 表示 Chrome 13 中 CPU 使用率较高——滚动时它会占用我 100% 的内核另外，从设计的角度来看，当内容的宽度保持不变时，调整背景大小似乎不是一个好主意。看起来您正在尝试使用背景使中间区域发出白色光。除非它们一致地动态调整大小，否则它将无法正常工作。 【参考方案1】：

我以为我会在这里做出贡献。而不是使用背景附件：固定；使用：之前和位置：固定；问题排序。我遇到了同样的问题。

在此处阅读更多信息：http://fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property

【讨论】：

很棒的解决方案。没有 jquery，只有纯 css3！这不适用于使用背景附件的多个元素这对我来说是谷歌的第一个结果，而且效果很好。这应该是公认的答案。也找到了这个解决方案。我每个部分都有一个背景，当您滚动浏览时，它会为每个透明位提供自己的固定背景。不幸的是，这个技巧在这种情况下不起作用。这是 imo 最好的解决方案【参考方案2】：

我遇到了同样的问题并使用这个 jQuery 插件解决了它： http://srobbin.com/jquery-plugins/jquery-backstretch/

它不使用任何 CSS3 属性，但运行良好，并且在 Chrome 13 或 Firefox 6 上没有任何性能问题。

【讨论】：

是的，喜欢不使用 css 和背景阻止我的页面渲染。 +1，谢谢！【参考方案3】：

当我删除 background-size 属性时，问题就消失了。我认为这是导致问题的大图像的缩放。如果这不起作用，只需完全删除背景图像。但是，我以前从未听说过大型背景图像会导致延迟。

【讨论】：

background-size 属性肯定会产生影响，但禁用它后该站点似乎仍然滚动缓慢。我会说这是 100% 的改进，但仍然存在问题。 @STW：如果你完全删除图像会怎样？删除图像似乎可以完全解决问题，无论 background-size 是启用还是禁用。但是，它似乎对 OP 的问题没有多大作用;-) 我完全删除了图像，尽管我更愿意保留它。我将在没有 background-size 属性的情况下进行测试。这不是解决办法。 “删除你的代码，它就会工作”，来吧。【参考方案4】：

问题实际上在于 background-attachment 固定值，如果您将其更改为 background-attachment: scroll for mobile devices 它应该可以解决滞后问题。

【讨论】：

【参考方案5】：

此外，将以下样式应用于 html 标记可显着提高 WebKit 浏览器（包括 Chrome）中的帧速率：