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

【问题标题】：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% 的内核
另外，从设计的角度来看，当内容的宽度保持不变时，调整背景大小似乎不是一个好主意。看起来您正在尝试使用背景使中间区域发出白色光。除非它们一致地动态调整大小，否则它将无法正常工作。

标签： css background vertical-scrolling smooth-scrolling

【解决方案1】：

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

【讨论】：

很棒的解决方案。没有 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）中的帧速率：

-webkit-transform: translate3d(0,0,0);

据我所知，这适用于（大）背景照片和不连贯的滚动的所有情况。

【讨论】：

【解决方案6】：

压缩图片（缩小尺寸），解决了我的问题，我强烈推荐使用像Radical Image Optimization Tool (RIOT)这样的工具，非常有效和简单。

在 linux 上，这可以使用 GIMP 来完成，您也可以删除图像的元数据以减小大小，使用像 exiftool 这样的工具。

【讨论】：

【解决方案7】：

在遇到相同问题时，将您的图像文件类型更改为 SVG 显着提高了我网站的性能！

【讨论】：

这不是答案。

【解决方案8】：

将背景大小设置为99.9% 而不是100% 或在固定附件的情况下覆盖

background-size : 99.9%;

【讨论】：