使用CSS隐藏动画GIF是否可以节省浏览器资源? [英] Does hiding an animated GIF with CSS conserve browser resources?

问题描述

我有一张gif图片.仅在非常特定的事件上显示它，而不是经常显示.默认情况下，使用display: none隐藏gif的html <img>标记.

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.

现在，我们都知道gif在计算机的cpu上可能很难.我不知道如何进行基准测试或检查隐藏的gif是否仍在使用CPU带宽.

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.

我用开发人员工具检查了gif的重新绘制-并没有按预期进行.那挺好的. FPS表也不会上升，内存使用也不会上升.但是我有一个功能强大的CPU和计算机.当gif出现时，这些也不会增加.

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.

有人对如何进行基准测试有想法，还是对浏览器了解得更多?我不想让这个gif成为从未见过它的人的资源消耗.而且我也不想将其从DOM中删除.

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"是您的朋友

如果在GIF的html <img>标记上使用display:none，则将完全不呈现GIF，并且将不使用任何CPU或GPU资源.参见此和

"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.

如果出于某些原因display:none不能满足要求，则免费提供 libgif-js 和 x-gif Javascript库都提供了以编程方式暂停和重新开始播放的功能动画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.

要提高页面加载速度并减少CPU和GPU负载，请将动画GIF转换为MP4视频，这需要显着减小内存占用并大大降低CPU/GPU使用率.请参阅文章的以下摘录，代码多么优雅会损害HTML5性能" ，乔治·劳顿:

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:

由于文件很小，动画GIF在许多网站上越来越受欢迎.但是，应尽可能避免使用它们(...)将视频用作动画而不是GIF，以实现良好的性能.当浏览器尝试为GIF设置动画时，它将使用图像中的更改来渲染对象.尽管文件可能很小，但渲染它们会占用CPU和内存.例如，一个200 KB的动画GIF可能需要千兆字节的内部存储器才能呈现.视频格式更容易呈现，可以更好地利用GPU，并且在呈现帧数据后更容易丢弃帧数据.

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.

根据文章通过转换为HTML5视频" ，由比利·霍夫曼，

如今，超过90％的桌面浏览器支持MP4视频...对于现代移动设备，支持率接近100％...

Today over 90% of desktop browsers support MP4 video ... For modern mobile devices, support is close to 100%...

我们的研究发现，动画GIF通常比正确编码的MP4视频大5至10倍.这种差异意味着GIF不仅浪费大量带宽，而且加载速度更慢，并且会带来糟糕的用户体验.

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.

实际上，将动画GIF转换为MP4视频是一种了不起的优化，当您上传动画GIF时，这正是Twitter，Facebook和imgur等网站所做的.他们无声地将其转换为MP4视频并显示出来.

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.

您可以使用免费的实用程序 ffmpeg 将动画GIF转换为MP4视频.然后，从此修改HTML:

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" />

对此:

<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>

这将自动开始视频并循环播放，而不会显示任何视频控件.这可提供与动画GIF相同的体验，但速度更快，更小.注意，我们仍然有一个<img>指向<video>标记内的原始动画GIF.这样，在不太可能的情况下，访问者的浏览器不支持MP4视频，仍会显示动画GIF，并且用户仍然可以体验内容.

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.

如果您真的想证明动画GIF不会导致CPU/GPU消耗，可以使用David Corvoysier在他的文章

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:

原理很简单:-在页面中插入一个非常简单的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 ...

您可以在此处下载他的Javascript代码.他的演示仅评估CSS动画的加载，但是您可以将GIF添加到每个<div>在他的代码中创建，以查看其对测试的影响.

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.

在执行动画基准测试时，您可以通过禁用硬件加速来故意削弱计算机的性能，从而将渲染活动从GPU移到CPU.这可以帮助您更轻松地注意到动画对性能的影响.

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屋！