我正在建立一个视差滚动网站（不是我们所有人），除其他外，揭示了一个图像作为用户滚动。
我已经通过将图像放在背景中，并在顶部放置一个实心填充的div来完成“显示”。然后根据滚动位置将这个div从100%高度动画到0%高度，从而显示背景图像。
我做了很多次这样的事情，不幸的是，我越来越慢。
使用Chrome的内置时间轴功能，我可以看到，大部分这种慢下来是从图像解码。对于上述揭示，它重新解码的图像每帧，这需要22毫秒每帧图像。
有没有人知道浏览器什么时候需要做图像解码，什么时候不需要？在我看来，很明显，如果我调整了图像的大小，它就需要做图像解码，但当我只覆盖了图像的一半时，它就不需要了。
谢谢你的帮忙。
3条答案
按热度按时间qqrboqgw1#
我也曾多次与这个问题作斗争，但至今我还没有发现任何具体的东西，我提出的解决方案似乎并不适用于所有情况，我也无法确定原因。
总之...
看起来，当您在图像顶部设置实体元素的动画时，Chrome会强制对图像进行重新编码。
我做了两件事，大部分都很成功。
1.如果您将
-webkit-transform : translate3d(0,0,0)添加到覆盖元素，您应该会发现大多数（如果不是所有）图像解码消失。1.如果将上面的CSS添加到覆盖元素本身没有帮助，请尝试将其添加到图像，或者尝试将其添加到两个元素。
我的理解是，使用3d css属性将图像推到自己的复合层中，该层由GPU缓存和处理，而不是浏览器软件渲染器。
90%的时候我发现以上的组合之一是成功的。我希望它能有所帮助。
nwo49xxi2#
你如何动画的财产？我认为你可能有很多的替代品，只是动画的高度（这是某种调整大小的容器）。
也许只是用另一个元素“剪辑”背景图像不那么密集。我在StackOverflow上找到了一个关于它的帖子，并给出了一些建议。如果你用JavaScript动画，不幸的是伪元素是没有选择的。
Clip/Crop background-image with CSS
jucafojl3#
每当Chrome试图重新加载图像时，它似乎会触发图像解码。现在，在正常情况下，这应该只会在每个图像上发生一次，但在某些情况下，Chrome似乎会“扔掉”图像，然后再重新解码。
如果你遇到Chrome不断触发图像解码的情况，你必须改变一些东西来指示Chrome停止丢弃并一次又一次地重新解码相同的图像。
在我们的例子中，我们发现尺寸（宽度/高度）太大的图像会导致这种行为;将大（尺寸）图像分割成几个较小尺寸的图像会使恒定的图像解码消失。