使用 CSS 隐藏动画 GIF 是否节省浏览器资源？
Does hiding an animated GIF with CSS conserve browser resources?
我有一个 gif 图片。它只在非常具体的事件中显示，不会太频繁。默认情况下，使用 display: none.
隐藏 gif 的 html <img> 标签
现在，我们都知道 gif 在计算机上可能非常困难 cpu。我不知道如何进行基准测试或检查隐藏的 gif 是否仍在使用 CPU 带宽。
我用开发工具检查了 gif 的重新绘制 - 它没有像预期的那样发生。那挺好的。 FPS 计也没有上升，内存使用也没有。但是我有强大的CPU和电脑；当 gif 出现时这些也不会上升。
有没有人知道如何对此进行基准测试，或者对浏览器更了解？我不希望这个 gif 成为从未见过它的人的资源浪费。而且我也不想将其从 DOM 中删除。
display:none 元素仍然存在，并由浏览器解析，它们只是对用户隐藏。
你可以使用 visible=false 因为这个元素在浏览器中没有解析，但我不知道你是否可以使用它。
我也会检查 visibility: hidden 因为我不知道这个选项是如何呈现的。
您可以用老派的方式对其进行基准测试，只需在您的页面中添加 50 个（或更多，如果需要的话）gif，直到您的 CPU 出现峰值，然后隐藏它并观察您的 CPU。
我还要指出，该行为在很大程度上取决于浏览器本身，因此您需要使用不同的浏览器进行检查才能真正确定。
"display:none" 是你的朋友
如果在 GIF 的 html <img> 标签上使用 display:none，GIF 根本不会被渲染，也不会使用任何 CPU 或 GPU 资源.有关解释，请参阅 this and this。
使用 Javascript 暂停动画 GIF
如果由于某种原因 display:none 没有满足要求，免费 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 获取有关这些库的进一步注释。
在 HTML5 标签中使用 MP4 而不是动画 GIF。
要提高页面加载速度并减少 CPU 和 GPU 负载，请将动画 GIF 转换为 MP4 视频，这需要明显更小的内存占用和更低的 CPU/GPU 使用率。请参阅文章的以下摘录，"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.
根据文章 "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.
您可以使用免费实用程序 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:[=29= 中描述的聪明方法]
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. His demo 只评估来自 CSS 动画的加载，但你可以将你的 GIF 添加到他的代码中创建的每个 <div>看看它对测试的影响。
在执行动画基准测试时，您可以通过禁用硬件加速来故意让您的计算机出现一些障碍，这会将渲染活动从 GPU 转移到 CPU。这可能会帮助您更轻松地注意到动画对性能的影响。
不应该。 In the MDN document for none value on display, 据说
The document is rendered as though the element did not exist.
Timeline 测试 chrome:
使用的图片：https://imgur.com/download/i8kbwLN ( 37M )
HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="a.gif" width="800px">
</body>
</html>
控制台：
use_jQuery();
setTimeout(function() {
$('img').css({display: 'block'});
setTimeout(function() {
$('img').css({display: 'none'});
}, 1000);
}, 2000);
Same things seems to happens with CSS animation:
可能元素甚至没有呈现。
如果您通过 css 的 display:none 隐藏任何图像/iframe，或者您通过此 div（或其他标签）隐藏任何 css 规则 (display:none)、此标记内的图像/iframe 等将不会在浏览器中加载。这意味着浏览器不会对这些元素发出 http 请求。
在您将显示 属性 更改为其他 none 后，浏览器将向服务器发送请求。
不是img，而是服务器请求的所有资源。
我有一个 gif 图片。它只在非常具体的事件中显示，不会太频繁。默认情况下，使用 display: none.
<img> 标签
现在，我们都知道 gif 在计算机上可能非常困难 cpu。我不知道如何进行基准测试或检查隐藏的 gif 是否仍在使用 CPU 带宽。
我用开发工具检查了 gif 的重新绘制 - 它没有像预期的那样发生。那挺好的。 FPS 计也没有上升，内存使用也没有。但是我有强大的CPU和电脑；当 gif 出现时这些也不会上升。
有没有人知道如何对此进行基准测试，或者对浏览器更了解？我不希望这个 gif 成为从未见过它的人的资源浪费。而且我也不想将其从 DOM 中删除。
display:none 元素仍然存在，并由浏览器解析，它们只是对用户隐藏。
你可以使用 visible=false 因为这个元素在浏览器中没有解析，但我不知道你是否可以使用它。
我也会检查 visibility: hidden 因为我不知道这个选项是如何呈现的。
您可以用老派的方式对其进行基准测试，只需在您的页面中添加 50 个（或更多，如果需要的话）gif，直到您的 CPU 出现峰值，然后隐藏它并观察您的 CPU。
我还要指出，该行为在很大程度上取决于浏览器本身，因此您需要使用不同的浏览器进行检查才能真正确定。
"display:none" 是你的朋友
如果在 GIF 的 html <img> 标签上使用 display:none，GIF 根本不会被渲染，也不会使用任何 CPU 或 GPU 资源.有关解释，请参阅 this and this。
使用 Javascript 暂停动画 GIF
如果由于某种原因 display:none 没有满足要求，免费 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 获取有关这些库的进一步注释。
在 HTML5 标签中使用 MP4 而不是动画 GIF。
要提高页面加载速度并减少 CPU 和 GPU 负载，请将动画 GIF 转换为 MP4 视频，这需要明显更小的内存占用和更低的 CPU/GPU 使用率。请参阅文章的以下摘录，"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.
根据文章 "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.
您可以使用免费实用程序 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:[=29= 中描述的聪明方法]
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. His demo 只评估来自 CSS 动画的加载，但你可以将你的 GIF 添加到他的代码中创建的每个 <div>看看它对测试的影响。
在执行动画基准测试时，您可以通过禁用硬件加速来故意让您的计算机出现一些障碍，这会将渲染活动从 GPU 转移到 CPU。这可能会帮助您更轻松地注意到动画对性能的影响。
不应该。 In the MDN document for none value on display, 据说
The document is rendered as though the element did not exist.
Timeline 测试 chrome:
使用的图片：https://imgur.com/download/i8kbwLN ( 37M )
HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="a.gif" width="800px">
</body>
</html>
控制台：
use_jQuery();
setTimeout(function() {
$('img').css({display: 'block'});
setTimeout(function() {
$('img').css({display: 'none'});
}, 1000);
}, 2000);
Same things seems to happens with CSS animation:
可能元素甚至没有呈现。
如果您通过 css 的 display:none 隐藏任何图像/iframe，或者您通过此 div（或其他标签）隐藏任何 css 规则 (display:none)、此标记内的图像/iframe 等将不会在浏览器中加载。这意味着浏览器不会对这些元素发出 http 请求。
在您将显示 属性 更改为其他 none 后，浏览器将向服务器发送请求。
不是img，而是服务器请求的所有资源。