使用CSS隐藏动画GIF是否可以保存浏览器资源？

Question

我有一个GIF图像.它仅在非常具体的事件中显示,而不是经常显示.默认情况下,<img>使用隐藏gif的html 标记display: none.

现在,我们都知道Gif在计算机的CPU上非常强硬.我不知道如何基准测试或检查隐藏的gif是否仍然使用CPU带宽.

我用开发工具检查了gif的重新绘制 - 它没有像预期的那样发生.非常好.FPS仪表也没有上升,内存使用也没有.但我有一个强大的CPU和计算机; 当gif出现时,这些都不会上升.

有没有人有关于如何对此进行基准测试的想法,或者对浏览器更了解？我不希望这个gif成为那些从未见过它的人的资源.而且我也不想将它从DOM中删除.

Answer 1

"display:none"是你的朋友

如果你display:none在GIF的html <img>标签上使用,GIF将根本不会被渲染,并且不会使用任何CPU或GPU资源.见这个和这个了解释.

使用Javascript暂停动画GIF

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

在HTML5标记内使用MP4而不是动画GIF.

要提高页面加载速度并降低CPU和GPU负载,请将动画GIF转换为MP4视频,这需要更小的内存占用和更低的CPU/GPU使用率.从文章,请参阅以下摘录"如何优雅的代码可以伤害HTML5性能"由乔治·劳顿:

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

根据文章"通过转换为HTML5视频优化GIF动画"由比利·霍夫曼,

今天超过90%的桌面浏览器支持MP4视频...对于现代移动设备,支持接近100%...

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

事实上,将动画GIF转换为MP4视频是一个非常棒的优化,它正是像Twitter和Facebook和imgur这样的网站上传动画GIF时所做的事情.他们默默地将其转换为MP4视频并显示相反.

您可以使用免费实用程序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>

这将自动启动视频并循环播放,而不显示任何视频控件.这提供了与动画GIF相同的体验,但它更快更小.请注意,我们仍然<img>指向<video>标签内的原始动画GIF .这种方式,如果访问者的浏览器不支持MP4视频,则仍会显示动画GIF,用户仍会体验该内容.

如果你还想要证明

如果你真的想要证明你的动画GIF不会导致CPU/GPU耗尽,你可以使用David Corvoysier在他的文章" 使用CSS有效测量浏览器帧率"中描述的一种聪明的方法:

原理很简单: - 在页面中插入一个非常简单的CSS动画项目, - 定期计算此项目的计算位置, - 已经过去的每秒,计算项目占用的不同位置的数量.

笨蛋,呃？好吧,也许,但它给出了令人惊讶的准确结果,实际上......

你可以在这里下载他的Javascript代码.他的演示只评估CSS动画的加载,但您可以将GIF添加到<div>他的代码中创建的每个GIF,以查看它对测试的影响.

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