使用 CSS 隐藏动画 GIF 是否可以节省浏览器资源? [英] Does hiding an animated GIF with CSS conserve browser resources?
问题描述
我有一张 gif 图像.它只在非常具体的事件中显示，不会太频繁.默认情况下，gif 的 html 标签使用 display: none 隐藏.
现在，我们都知道 gif 在计算机的 CPU 上可能非常困难.我不知道如何进行基准测试或检查隐藏的 gif 是否仍然使用 CPU 带宽.
我用开发工具检查了 gif 的重绘 - 它没有发生，正如预期的那样.那挺好的.FPS 计也不会上升，内存使用量也不会上升.但我有一个强大的 CPU 和计算机；当 gif 出现时，这些也不会上升.
有没有人有关于如何对此进行基准测试的想法，或者更了解浏览器?我不希望这个 gif 成为从未见过它的人的资源猪.而且我也不想从 DOM 中删除它.
"display:none" is Your Friend
如果在 GIF 的 html <img> 标签上使用 display:none，则 GIF 根本不会被渲染，也不会使用任何 CPU 或 GPU资源.请参阅:
原理很简单: - 在页面中插入一个非常简单的 CSS 动画项目， - 定期计算该项目的计算位置， - 每过去一秒，计算该项目占据的不同位置的数量.
很蠢，嗯?好吧，也许吧，但它给出了令人惊讶的准确结果，实际上......
您可以在此处下载他的 Javascript 代码.他的 demo 仅评估 CSS 动画的加载，但您可以将 GIF 添加到每个 在他的代码中创建了
在执行动画基准测试时，您可以通过禁用硬件加速(这会将渲染活动从 GPU 转移到 CPU)来故意降低计算机的性能.这可能会帮助您更轻松地注意到动画对性能的影响.
I have a gif image. It gets shown only on very specific events, not too often. By default, the gif's html <img> tag is hidden using display: none.
Now, we all know gifs can be very tough on a computer's cpu. I don't know how to benchmark or check whether a hidden gif still uses CPU bandwidth.
I checked the repainting of the gif with dev tools - it's not happening, as expected. That's good. The FPS meter doesn't go up either, and neither does memory usage. But I have a powerful CPU and computer; these don't go up when the gif appears either.
Does anyone have ideas for how to benchmark this, or knows better about browsers? I don't want this gif to be a resource hog for people who never see it. And I don't want to remove it from the DOM either.
"display:none" is Your Friend
If you use display:none on the GIF's html <img> tag, the GIF will not be rendered at all, and will not use any CPU or GPU resources. See this and this for explanations.
Use Javascript to Pause the Animated GIF
If for some reason display:none doesn't fill the bill, the free libgif-js and x-gif Javascript libraries both provide the ability to programmatically pause and restart the playing of animated GIFs. These libraries also offer a lot of other features that you are probably not interested in. See the answers to this SO question for further notes about these libraries.
Use an MP4 Inside an HTML5 Tag Instead of an Animated GIF.
To improve the page load speed and reduce CPU and GPU load, translate your animated GIF to an MP4 video, which requires a significantly smaller memory footprint and much lower CPU/GPU usage. See the following excerpt from the article, "How elegant code can hurt HTML5 performance" by George Lawton:
Animated GIFs are growing in popularity on many sites owing to their small file size. However, they should be avoided when possible (...) Use video for animations rather than GIFs to achieve good performance. When a browser tries to animate a GIF, it uses the change in images to render the objects. Although the files can be small, rendering them taxes CPUs and memory. For example, a 200 KB animated GIF can require gigabytes of internal memory to render. Video formats are much easier to render, can better leverage the GPU, and make it easier to throw out frame data after it is presented.
According to the article "Optimizing Animated GIFs by Converting to HTML5 Video" by Billy Hoffman,
Today over 90% of desktop browsers support MP4 video ... For modern mobile devices, support is close to 100%...
Our research has found that animated GIFs are usually 5 to 10 times larger than a properly encoded MP4 video. This difference means that GIFs are not only wasting significant amounts of bandwidth, they are loading more slowly and creating a bad user experience.
In fact, converting animated GIFs to MP4 video is such an awesome optimization that it is exactly what sites like Twitter and Facebook and imgur do when you upload an animated GIF. They silently convert it to an MP4 video and display that instead.
You can use the free utility ffmpeg to translate your animated GIF to an MP4 video. Then, modify your HTML from this:
<img src="video.gif" alt="" width="400" height="300" />
to this:
<video autoplay="autoplay" loop="loop" width="400" height="300">
<source src="video.mp4" type="video/mp4" />
<img src="video.gif" width="400" height="300" /></video>
This will automatically start the video, and loop it, without displaying any video controls. This gives the same experience as the animated GIF but it’s faster and smaller. Notice that we still have an
<img>pointing at the original animated GIF inside the<video>tag. This way in the unlikely event the a visitor’s browser doesn’t support MP4 videos, the animated GIF will still be displayed and the user still experiences the content.
If You Still Want Proof
If you really want to prove that your animated GIF causes no drain on your CPU/GPU, you can use a clever method described by David Corvoysier in his article, Effectively measuring browser framerate using CSS:
The principle is quite simple: - insert a very simple CSS animated item in a page, - calculate the computed position of this item at regular intervals, - every second that has elapsed, count the number of different positions occupied by the item.
Pretty dumb, uh ? Well, maybe, but it gives surprisingly accurate results, actually ...
You can download his Javascript code here. His demo only evaluates the loading from CSS animations, but you could add your GIF to each <div> created in his code to see its effect on the test.
When performing a benchmark test for animation, you can purposely handicap your computer a little by disabling the hardware acceleration, which will move rendering activities from the GPU to the CPU. This might help you to more easily notice the impact of animation on performance.
这篇关于使用 CSS 隐藏动画 GIF 是否可以节省浏览器资源?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
