来自 Chrome 时间轴开发工具的图像解码时间答案

【问题标题】：Image Decode times from Chrome Timeline dev tool来自 Chrome 时间轴开发工具的图像解码时间
【发布时间】：2013-04-01 23:52:40
【问题描述】：

我正在构建一个视差滚动网站（不是我们所有人），除此之外，它会在用户滚动时显示图像。

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

我多次做这种事情，不幸的是我变慢了。

使用 Chrome 的内置时间轴功能，我可以看到大部分减速来自图像解码。对于上面的揭示，它是每帧重新解码图像，每帧每幅图像需要 22ms。

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

感谢您的帮助。

【问题讨论】：

【解决方案1】：

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

无论如何...

似乎当您在图像顶部为实体元素设置动画时，chrome 会强制对图像进行重新编码。

我尝试了两件事，大部分都取得了成功。

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

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

【讨论】：

嗨，Gordyr，感谢您的回复。我确实记得尝试使用 webkit-transforms 来让 GPU 承受压力，但我不认为这最终解决了我的问题 - 可能是因为初始化时间导致了更多的头痛，但老实说，我可以'不太记得为什么它不起作用。最后，我为不同的项目使用了各种不同的方法，让它工作得很好。它在行动中：patentise.com
很高兴听到你把它整理好了 :-) 顺便说一句，它看起来很棒。

【解决方案2】：

如何为属性设置动画？我认为您可能有很多替代方法可以仅对高度进行动画处理（这是对容器的某种调整大小）。

也许只用另一个元素“剪辑”背景图像的强度较低。我在 StackOverflow 上找到了一个关于它的线程并提出了一些建议。如果您使用 javascript 制作动画，不幸的是，伪元素是没有选择的......

【讨论】：

嗨 Nirazul，我使用 javascript 为覆盖 div 的高度设置动画。我会看看剪辑方法的工作方式是否有任何不同，然后告诉你。
非常感谢 Nirazul，我发现使用剪辑隐藏图像比 display:none、将图像移出屏幕或将图像大部分移出屏幕更有效 -因为这样做，我在 Chrome 中触发的图像解码要少得多。但是，我没有将此问题标记为已回答，因为真正的 SO 问题是：“有谁知道浏览器何时需要进行图像解码，何时不需要？”但你的回答很有帮助，谢谢。