html - 使用 CSS 隐藏动画 GIF 会节省浏览器资源吗？

Question

我有一个 gif 图片。它只在非常具体的事件中显示，不会太频繁。默认情况下，gif 的 html <img>使用 display: none 隐藏标签.

现在，我们都知道 gif 文件对计算机的 CPU 来说非常吃力。我不知道如何进行基准测试或检查隐藏的 gif 是否仍在使用 CPU 带宽。

我用开发工具检查了 gif 的重新绘制 - 它没有像预期的那样发生。那挺好的。 FPS 计也没有上升，内存使用也没有。但是我有强大的CPU和电脑；当 gif 出现时，这些也不会上升。

有没有人知道如何对此进行基准测试，或者对浏览器有更好的了解？我不希望这个 gif 成为从未见过它的人的资源浪费。而且我也不想将其从 DOM 中删除。

Answer 1

"display:none"是你的 friend

如果您使用 display:none在 GIF 的 html 上 <img>标签，GIF 根本不会被渲染，也不会使用任何 CPU 或 GPU 资源。参见 this和 this解释。

使用 Javascript 暂停 GIF 动画

如果由于某种原因display:none不填单，免费libgif-js和 x-gif Javascript 库都提供了以编程方式暂停和重新启动动画 GIF 播放的能力。这些库还提供了许多您可能不感兴趣的其他功能。请参阅 this SO question 的答案。有关这些库的进一步说明。

在 HTML5 标签中使用 MP4 而不是动画 GIF。

要提高页面加载速度并减少 CPU 和 GPU 负载，请将动画 GIF 转换为 MP4 视频，这需要显着减少的内存占用和低得多的 CPU/GPU 使用率。请参阅文章的以下摘录，"How elegant code can hurt HTML5 performance"通过 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.

根据文章"Optimizing Animated GIFs by Converting to HTML5 Video"通过 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.

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

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

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 在他的文章 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 ...

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

在执行动画基准测试时，您可以通过禁用硬件加速来故意让您的计算机出现一些障碍，这会将渲染事件从 GPU 转移到 CPU。这可能有助于您更轻松地注意到动画对性能的影响。