图像解码时间从Chrome时间轴开发工具

Question

我正在建立一个视差滚动网站（不是我们全部），除其他事项外，用户滚动显示图像。

我已经做了通过将背景图像，并放置固体填充格在最前“泄露”。然后，根据滚动位置将该div从100％高度移动到0％高度，从而显示背景图像。

我做这种事情多次，遗憾的是我越来越慢了下来。

使用Chrome内置的时间轴功能，我可以看到，大部分的这种减缓是从图像进行解码。对于上面的显示，它将每帧重新解码图像，每帧每个图像需要22ms。

有谁知道什么时候浏览器需要做解码图像，当它不？对我来说，如果我重新调整图像的尺寸，似乎很明显，但是当我只覆盖一半图像时不需要这样做？

感谢您的帮助。

Answer 1

你如何给房产设置动画？我认为你可能有很多替代方法来调整高度（这是容器的某种调整大小）。

也许这只是“夹”与其他元素的背景图像不够密集。我在StackOverflow上发现了一个关于它的线索，提供了一些建议。如果您使用JavaScript动画，不幸的是伪元素是没办法......

Clip/Crop background-image with CSS

Answer 2

我这个问题也争夺了不少。至今我还没有找到具体的东西，我提出的解决方案似乎并不适用于所有情况，我也无法确定原因。

反正...

看来，当你在动画图像的顶部了坚实的元素，镀铬迫使图像的重新编码。

有两件事我已经尝试过，大部分都是成功的。

1. 如果添加-webkit-transform : translate3d(0,0,0)到覆盖元件，你会发现大多数，如果不是全部的图像进行解码消失。

2. 如果将上述CSS到覆盖元件本身没有帮助，尝试将其添加到图像，而不是，或甚至尝试将其添加到这两个元素。

我的理解是，使用3d css属性将图像推入自己的复合图层，该图层由GPU而不是浏览器软件渲染器进行缓存和处理。

90％的时间我发现上述组合之一成功。我希望它有帮助。