来自Chrome时间线开发工具的图片解码时间 [英] Image Decode times from Chrome Timeline dev tool
问题描述
我正在建立一个视差滚动网站（不是我们所有），除了其他事情，显示一个图像作为用户滚动。
I'm building a parallax scrolling website (aren't we all) that amongst other things, reveals an image as the user scrolls.
通过将图像放在背景中的显示，以及在顶部放置实心的填充的div。然后，我会根据滚动位置将这个div从100％高度动画变为0％，从而显示背景图片。
I've done the 'reveal' by putting the image in the background, and placing a solid filled div on top. I then animate this div from 100% height to 0% height based on the scroll position, thus revealing the background image.
我多次做这种事
使用Chrome的内置时间轴功能，我可以看到，大部分的这种减慢是从图像解码。对于上面的揭示，它是每帧重新解码图像，每帧每帧图像需要22ms。
Using Chrome's built in Timeline feature, I can see that most of this slow down is from Image Decodes. For the above reveal, it's re-Decoding the image every frame, which takes 22ms per image per frame.
有人知道什么时候浏览器需要做图像解码和时它不是？看起来很明显，如果我调整图像的大小，但不是需要，当我只是半封面的图像需要。
Does anyone know when the browser needs to do Image Decode and when it doesn't? It seems obviously to me that it would need to if I resized the image, but not that it would need to when I just half cover the image?
感谢您的帮助。
推荐答案
我也遇到了这个问题。我还没有找到任何具体的，我提出的解决方案似乎并不工作在所有情况下，我没有能够确定为什么。
I've battled with this problem a lot also. As yet I have not found anything concrete and my proposed solution does not seem to work in ALL cases and I have not been able to ascertain why.
无论如何...
看来，当您在图片顶部设置实体元素时，chrome会强制重新编码图片。
It appears that when you animate a solid element over the top of an image, chrome forces a recode of the image.
我尝试过两件事，大部分都是成功的。
There are two things I have tried and for the most part they have been successful.
-
c $ c> -webkit-transform：translate3d（0,0,0）到覆盖元素，你应该会发现大多数，如果不是所有的图像解码消失。
If you add
-webkit-transform : translate3d(0,0,0)to the covering element, you should find most, if not all of the image decodes disappear.
如果将上述CSS添加到覆盖元素本身没有帮助，请尝试将其添加到图像，或者尝试将它添加到这两个元素。
If adding the above CSS to the covering element itself does not help, try adding it to the image instead, or indeed try adding it to both elements.
我的理解是，使用3d css属性将图像推送到自己的复合图层，该复合图层由GPU缓存和处理，而不是浏览器软件渲染器。
My understanding is that using the 3d css property pushing the image into its own composite layer which is cached and handled by the GPU rather than the browsers software renderer.
90％的时间我发现上述组合之一成功。我希望它有所帮助。
90% of the time I have found one of the above combinations successful. I hope it helps.
这篇关于来自Chrome时间线开发工具的图片解码时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
