我正在构建一个视差滚动网站（不是我们所有人），除其他外，它会在用户滚动时显示图像。
我通过将图像放在背景中并在顶部放置一个实心填充的 div 来完成“显示”。然后，我根据滚动位置将此 div 从 100% 高度设置为 0% 高度，从而显示背景图像。
我多次做这种事情，不幸的是我变慢了。
使用 Chrome 的内置时间轴功能，我可以看到大部分减速来自图像解码。对于上面的揭示，它每帧重新解码图像，每帧每幅图像需要 22 毫秒。
有谁知道浏览器何时需要进行图像解码，何时不需要？在我看来，如果我调整图像大小显然需要它，但当我只覆盖图像一半时不需要它？
谢谢你的帮助。
我也经常与这个问题作斗争。到目前为止，我还没有发现任何具体的东西，而且我提出的解决方案似乎不适用于所有情况，我也无法确定原因。
反正...
似乎当您在图像顶部为实体元素设置动画时，chrome 会强制对图像进行重新编码。
我尝试了两件事，并且大部分都取得了成功。
如果您添加-webkit-transform : translate3d(0,0,0)到覆盖元素，您应该会发现大部分（如果不是全部）图像解码都消失了。
如果将上面的 CSS 添加到覆盖元素本身没有帮助，请尝试将其添加到图像中，或者确实尝试将其添加到两个元素中。
我的理解是使用 3d css 属性将图像推送到自己的复合层中，该复合层由 GPU 而不是浏览器软件渲染器缓存和处理。
90% 的时间我发现上述组合中的一种是成功的。我希望它有所帮助。
您如何为属性设置动画？我认为您可能有很多替代方法可以仅对高度进行动画处理（这是对容器的某种调整大小）。
也许只用另一个元素“剪辑”背景图像并不那么密集。我在 StackOverflow 上找到了一个关于它的线程并提出了一些建议。如果您使用 javascript 制作动画，不幸的是，伪元素是没有选择的......