我正在构建一个视差滚动网站（不是我们所有人吗），除其他外，它会在用户滚动时显示图像。
我通过将图像放在背景中并在顶部放置一个实心填充的 div 来完成“显示”。然后，我根据滚动位置将该 div 从 100% 高度设置为 0% 高度，从而显示背景图像。
我多次做这种事情，不幸的是我的速度越来越慢。
使用 Chrome 内置的时间轴功能，我可以看到大部分速度减慢来自图像解码。对于上面的展示，它每帧重新解码图像，每帧每张图像需要 22 毫秒。
有谁知道浏览器何时需要进行图像解码，何时不需要？在我看来，显然，如果我调整图像大小，则需要这样做，但当我只覆盖图像的一半时，则不需要？
感谢您的帮助。
我也曾多次与这个问题作斗争。到目前为止，我还没有找到任何具体的东西，我提出的解决方案似乎并不适用于所有情况，我还无法确定原因。
反正...
看来，当您在图像顶部对实体元素进行动画处理时，chrome 会强制对图像进行重新编码。
我尝试过两件事，大部分都是成功的。
如果你添加-webkit-transform : translate3d(0,0,0)对于覆盖元素，您应该会发现大多数（如果不是全部）图像解码消失。
如果将上述 CSS 添加到覆盖元素本身没有帮助，请尝试将其添加到图像中，或者尝试将其添加到两个元素中。
我的理解是，使用 3d css 属性将图像推入其自己的复合层，该复合层由 GPU 而不是浏览器软件渲染器缓存和处理。
90% 的情况下，我发现上述组合之一是成功的。我希望它有帮助。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
