网站滚动滞后答案

【问题标题】：Website lag on scroll网站滚动滞后
【发布时间】：2014-12-16 13:48:44
【问题描述】：

我正忙于我的网站，现在我遇到了问题。

当我向下滚动到我的联系页面时，我的浏览器开始滞后，因为我有一个带有属性滚动和大小封面的背景图像。

所以我google了一下，结果是物业覆盖导致滞后。

我该如何解决这个问题？我需要覆盖我的背景大小，因为我的网站是响应式的

我的代码：

background-attachment: scroll,  fixed;
background-color: #666;
background-image: url("../images/black.png"), url("../images/bg-footer.jpg");
background-position: center,    center center;
background-size: cover, cover;

【问题讨论】：

你压缩过你的图片吗？这可能是开始的地方。
是的，图片只有500kb
您是否尝试过添加 transform: rotateX(0deg); 以强制将其放入单独的图层并将其绘图移交给 GPU？
如果你使用transform:，你会强制你的背景绘制由你的GPU而不是你的CPU来完成，这样可以加快速度。
-webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0); 正确强制硬件加速

标签： html css

【解决方案1】：

我能问一下为什么你需要使用背景附件：滚动吗？

您已将背景图像设置为覆盖其容器的整个宽度，这意味着无论如何它都不会改变滚动位置。

每当您滚动鼠标时，您都会强制浏览器重新计算图像大小，从而导致延迟。

您也可以尝试使用其他属性（例如包含或 100% 宽度）来修复您的图像。

【讨论】：

图像调整为宽度的全尺寸。然后它必须滚动。在以下位置找到我的灵感：html5up.net/alpha
是的，就像我上面说的，这是因为浏览器会动态计算全屏大小，并在您更改屏幕位置时将其应用于图像。这意味着向下滚动会使浏览器每秒多次执行这种复杂的计算。答案不是不使用带有背景滚动的背景封面。这些答案也应该有帮助：stackoverflow.com/questions/7869086/…stackoverflow.com/questions/7033979/…