发表新帖
发表新帖

Does hiding an animated GIF with CSS conserve browser resources?

前端 未结
关注
4 1296
庸人自扰
庸人自扰 2021-02-20 10:10

I have a gif image. It gets shown only on very specific events, not too often. By default, the gif\'s html tag is hidden using display: none

相关标签:
4条回答
  • 囚心锁ツ
    2021-02-20 11:03

    with display:none elements still exist in, and are resolved by the browser, they are only hidden from the user.

    you could use visible=false as this elements are not resolved in the browser but I don't know if you can use it.

    I would also check visibility: hidden as I don't know for this option how is it rendered.

    You can benchmark it the old school way, just jam up 50 (or more if necessary) gif's in your page, until your CPU spikes and than hide it and observe your CPU.

    I would also point out that the behavior will heavily depend on the browser itself so you would need to check it with different browser to be really sure.

    0 讨论(0)
  • 野的像风
    2021-02-20 11:04

    If you are hiding any imges(s) / iframe(s) through css's display:none or you are hiding any div (or other tag) through this css rule (display:none), image(s) / iframe(s) etc within this tag will not be loaded in the browser. It means browser will not make http request for these elements.

    Browser will sent the request to the server after you change the display property to other then none.

    It is not about img, but all the resources which makes server requests.

    0 讨论(0)
  • 情歌与酒
    2021-02-20 11:05

    It shouldn't. In the MDN document for none value on display, It said that

    The document is rendered as though the element did not exist.

    A Timeline test on chrome:

    Image used: https://imgur.com/download/i8kbwLN ( 37M )

    HTML: 

    <!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <img src="a.gif" width="800px">
    </body>
</html>

    Console:

    use_jQuery();

setTimeout(function() {
    $('img').css({display: 'block'});
    setTimeout(function() {
        $('img').css({display: 'none'});
    }, 1000);
}, 2000);

    Same things seems to happens with CSS animation:

    Probably the element don't even render.

    0 讨论(0)
  • 无人及你
    2021-02-20 11:06

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

    Use Javascript to Pause the Animated 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.

    Use an MP4 Inside an HTML5 Tag Instead of an Animated GIF.

    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:

    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.

    According to the article "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.

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

    to this:

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


    If You Still Want Proof

    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:

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

    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.

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题