javascript - Chrome Timeline 开发工具的图像解码时间

Question

我正在构建一个视差滚动网站(我们不都是这样)，除其他外，它会在用户滚动时显示图像。

我通过将图像放在背景中并在顶部放置一个实心填充的 div 来完成“显示”。然后我根据滚动位置将此 div 从 100% 高度设置为 0% 高度的动画，从而显示背景图像。

我做了很多次这种事情，不幸的是我的速度越来越慢。

使用 Chrome 的内置时间轴功能，我可以看出大部分速度减慢来自图像解码。对于上面的显示，它每帧重新解码图像，每帧每张图像需要 22 毫秒。

有谁知道浏览器什么时候需要进行图像解码，什么时候不需要？在我看来很明显，如果我调整图像大小，它会需要，但当我只覆盖图像的一半时不需要吗？

感谢您的帮助。

Answer 1

我也经常与这个问题作斗争。到目前为止，我还没有找到任何具体的东西，我提出的解决方案似乎并不适用于所有情况，我也无法确定原因。

无论如何...

看来，当您在图像顶部为实体元素设置动画时，chrome 会强制重新编码图像。

有两件事我已经尝试过并且大部分都成功了。

1. 如果您将 -webkit-transform : translate3d(0,0,0) 添加到覆盖元素，您应该会发现大部分(如果不是全部)图像解码都消失了。

2. 如果将上述 CSS 添加到覆盖元素本身没有帮助，请尝试将其添加到图像，或者确实尝试将其添加到两个元素。

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

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