我有一个gif图片。它仅在非常特定的事件上显示，而不是经常显示。默认情况下，gif的html<img>标记使用隐藏display: none。
现在，我们都知道，gif在计算机的cpu上可能很难。我不知道如何进行基准测试或检查隐藏的gif是否仍然使用CPU带宽。
我用开发人员工具检查了gif的重画-并没有按预期进行。那挺好的。FPS表也不会上升，内存使用也不会上升。但是我有功能强大的CPU和计算机。当gif出现时，这些也不会增加。
是否有人对如何进行基准测试有想法，或者对浏览器了解得更多？我不想让这个gif成为从未看过它的人的资源消耗。而且我也不想将其从DOM中删除。
如果您display:none在GIF的html<img>标记上使用，则GIF根本不会呈现，也不会使用任何CPU或GPU资源。见这个和这个了解释。
如果由于某种原因display:none无法负担费用，免费的libgif-js和x-gif Javascript库都可以以编程方式暂停和重新启动动画GIF的播放。这些库还提供了许多您可能不感兴趣的其他功能。有关这些库的更多说明，请参见此SO问题的答案。
为了提高页面加载速度并减少CPU和GPU负载，请将动画GIF转换为MP4视频，这需要显着减小的内存占用和更低的CPU / GPU使用率。从文章，请参阅以下摘录“如何优雅的代码可以伤害HTML5性能”由乔治·劳顿：
动画GIF由于文件较小而在许多网站上越来越受欢迎。但是，应尽可能避免使用它们（...）将视频用作动画而不是GIF，以实现良好的性能。当浏览器尝试制作GIF动画时，它使用图像中的更改来渲染对象。尽管文件可能很小，但渲染它们会占用CPU和内存。例如，一个200 KB的动画GIF可能需要千兆字节的内部存储器才能呈现。视频格式更容易呈现，可以更好地利用GPU，并且在呈现帧数据后更容易丢弃帧数据。
根据文章“优化GIF动画通过转换为HTML5视频”由比利·霍夫曼，
如今，超过90％的桌面浏览器支持MP4视频...对于现代移动设备，支持率接近100％...
我们的研究发现，动画GIF通常比正确编码的MP4视频大5至10倍。这种差异意味着GIF不仅浪费大量带宽，而且加载速度更慢，并且会带来不良的用户体验。
实际上，将动画GIF转换为MP4视频是一种了不起的优化，当您上传动画GIF时，恰恰是Twitter，Facebook和imgur等网站所做的。他们无声地将其转换为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>他的代码中创建的每个动画中，以查看其对测试的影响。
在执行动画基准测试时，可以通过禁用硬件加速来有意地对计算机造成一些障碍，这会将渲染活动从GPU移到CPU。这可以帮助您更轻松地注意到动画对性能的影响。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句