Скрывает ли анимированный GIF с помощью CSS ресурсы браузера?

У меня есть изображение gif. Это проявляется только на очень специфических событиях, не слишком часто. По умолчанию тег gif html <img> скрыт с помощью display: none.

Теперь мы все знаем, что gif могут быть очень жесткими на компьютерном процессоре. Я не знаю, как тестировать или проверять, продолжает ли скрытый gif использовать пропускную способность процессора.

Я проверил перерисовку gif с помощью dev tools - это не происходит, как и ожидалось. Это хорошо. Счетчик FPS также не увеличивается, и использование памяти не используется. Но у меня мощный процессор и компьютер; они не поднимаются, когда появляется gif.

Есть ли у кого-нибудь идеи относительно того, как оценивать это или лучше знать о браузерах? Я не хочу, чтобы этот gif был ресурсным свистом для людей, которые никогда его не видят. И я тоже не хочу удалять его из DOM.

Ответ 1

"display: none" является вашим другом

Если вы используете display:none в теге GIF html <img>, GIF вообще не будет отображаться и не будет использовать ресурсы центрального процессора или графического процессора. Для пояснений см. this и .

Используйте Javascript для приостановки анимационного GIF

Если по какой-либо причине display:none не заполняет счет, libgif-js и x-gif Библиотеки Javascript предоставляют возможность программно приостанавливать и перезапускать анимированные GIF файлы. Эти библиотеки также предлагают множество других функций, которые вам, вероятно, не интересуют. См. Ответы на этот вопрос SO для дальнейших заметок об этих библиотеках.

Используйте MP4 внутри тега HTML5 Вместо анимированного GIF.

Чтобы повысить скорость загрузки страницы и снизить нагрузку на процессор и графический процессор, переведите ваш анимированный GIF в видео MP4, что требует значительно меньшего объема памяти и значительно меньшего использования CPU/GPU. См. Следующий отрывок из статьи Как элегантный код может повредить производительность HTML5 Джордж Лоутон:

Анимированные GIF файлы растут в популярности на многих сайтах из-за их небольшого размера файла. Однако их следует избегать, когда это возможно (...) Используйте видео для анимации, а не GIF, чтобы достичь хорошей производительности. Когда браузер пытается анимировать GIF, он использует изменение изображений для рендеринга объектов. Несмотря на то, что файлы могут быть небольшими, они дают им налоги на процессоры и память. Например, для анимированного GIF на 200 КБ может потребоваться гигабайт внутренней памяти для рендеринга. Форматы видео гораздо проще в рендеринге, могут лучше использовать графический процессор и упростить вывод данных кадра после его представления.

Согласно статье "Оптимизация анимированных GIF файлов путем преобразования в HTML5-видео" Билли Хоффман,

Сегодня более 90% настольных браузеров поддерживают видео MP4... Для современных мобильных устройств поддержка приближается к 100%...

Наши исследования показали, что анимированные GIF файлы обычно в 5-10 раз больше, чем правильно закодированные видео MP4. Это различие означает, что 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>, указывающий на исходный анимированный GIF внутри тега <video>. Таким образом, в маловероятном случае, когда браузер посетителей не поддерживает видеоролики MP4, анимированный GIF будет отображаться, и пользователь все еще испытывает содержание.

Если вы все еще хотите проверить

Если вы действительно хотите доказать, что ваш анимированный GIF не вызывает утечки на вашем CPU/GPU, вы можете использовать умный метод, описанный Дэвидом Корвозиером в своей статье, Эффективное измерение частоты кадров браузера с помощью CSS:

Принцип довольно прост: - вставьте очень простой анимированный элемент CSS на странице, - вычислите вычисленное положение этого элемента через равные промежутки времени, - каждую секунду, прошедшую, подсчитайте количество разных позиций, занятых элементом.

Довольно тупой, мм? Ну, может быть, но это дает удивительно точные результаты, на самом деле...

Вы можете скачать его код Javascript здесь. Демоверсия только оценивает загрузку из анимации CSS, но вы можете добавить свой GIF к каждому <div>, созданному в его коде, чтобы увидеть его влияние на тест.

При выполнении тестового теста для анимации вы можете немного помешать вашему компьютеру, отключив аппаратное ускорение, которое перенесет операции рендеринга с GPU на CPU. Это может помочь вам более легко заметить влияние анимации на производительность.

Ответ 2

с элементами display:none все еще существуют и разрешены браузером, они только скрыты от пользователя.

вы можете использовать visible=false, поскольку эти элементы не разрешены в браузере, но я не знаю, можете ли вы его использовать.

Я бы также проверил visibility: hidden, поскольку я не знаю для этого параметра, как это делается.

Вы можете сравнить его с старой школьной дорогой, просто заткните до 50 (или больше, если необходимо) gif на своей странице, пока ваш процессор не скачет, а затем не скроет его и не увидит ваш процессор.

Я бы также отметил, что поведение будет сильно зависеть от самого браузера, поэтому вам нужно будет проверить его с помощью другого браузера, чтобы быть действительно уверенным.

Ответ 3

Не следует. В документе MDN для значения none на display он сказал, что

Документ отображается так, как будто этот элемент не существует.

A `Timeline` тест на хроме:

Используемое изображение: 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);

То же самое происходит с анимацией CSS:

Вероятно, элемент даже не отображается.

Ответ 4

Если вы скрываете любые imges (s)/iframe (s) через css display: none или вы скрываете любой div (или другой тег) через это правило css (display: none), image (s)/iframe (iframe) s) и т.д. внутри этого тега не будут загружены в браузере. Это означает, что браузер не будет запрашивать http для этих элементов.

Браузер отправит запрос на сервер после того, как вы измените свойство отображения на другое, а затем нет.

Это не о img, а о всех ресурсах, которые делают запросы сервера.