Проверьте, включено ли ускорение аппаратного обеспечения для анимации CSS?

Как я могу сказать (для целей тестирования), если для анимации CSS включена функция ускорения аппаратного обеспечения?

У меня есть следующий код, который существенно расширяет элемент и делает его полноэкранным (без использования полноэкранного API HTML5). Он работает как заикающаяся астматическая черепаха на большинстве мобильных телефонов при использовании анимации jQuery, поэтому я использовал CSS3 вместо этого.

Вот пример jsFiddle:

$("#makeFullscreen").on("click", function() {        
			
    var map = $("#map"),
        mapTop = map.offset().top,
        mapLeft = map.offset().left;
    
    $("#map").css({
        "position": "fixed",
        "top": mapTop,
        "left": mapLeft,
        "width": map.outerWidth(true),
        "height": map.outerHeight(true)
    });
    
    setTimeout(function(){map.addClass("fullscreen")},1);
    
    return false;        
});
.mapContainer {    
    width: 150px;
    height: 200px;
    position: relative;
    margin: 0 auto;
}

.map {  
    background: #00f;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
}
.fullscreen {
    -webkit-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
    -moz-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
    -ms-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
    -o-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
    transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
    
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    
    top: 0 !important;
    left: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

#makeFullscreen {
    margin-top: 20px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mapContainer">
    <div id="map" class="map">
        <button id="makeFullscreen">Make Fullscreen</button> 
    </div>
</div>

Ответы

Ответ 1

Обзор

Переход свойств CSS на элемент аппаратно ускорен, если выполняются все эти условия:

  • Компонент аппаратного ускорения слоев включен в браузере
  • Переходящее свойство CSS ускоряется
  • Элементу присвоен собственный слой компоновки

Как правило, требования к этим условиям:

  • Необходимо включить соответствующие параметры аппаратного ускорения, а графические устройства и графические драйверы устройства не должны быть внесены в черный список.
  • Только компоновка свойств CSS (opacity, transform: translate/scale/rotate и т.д.) являются ускоряемыми
  • В каждом браузере есть определенные причины для принятия решения о том, следует ли предоставить элементу свой собственный слой компоновки (или его можно принудительно использовать с помощью "быстрого перехода", например transform: translate3d)

Компоновка аппаратного ускоренного слоя

Чтобы определить, включено ли это:

Chrome

1. Общее ускорение

  • Перейдите к chrome://settings
  • Нажмите кнопку + Показать расширенные настройки
  • В разделе Система проверьте состояние флажка Использовать аппаратное ускорение при наличии.

Если ускорение включено, то:

2. Ускоренная компоновка

  • Перейдите к chrome://gpu
  • В разделе Состояние графических функций проверьте значение Композиция. Это будет одно из следующего:
    • Аппаратное ускорение
    • Только программное обеспечение, аппаратное ускорение недоступно

Подробнее о Программном Compositor от docs:

В некоторых ситуациях аппаратная компоновка недопустима, например. если графическое изображение устройства драйверы занесены в черный список или на устройстве не хватает GPU целиком. Для этих ситуаций альтернативная реализация GL-рендеринга, называемая SoftwareRenderer

(Примечание: Chrome также имеет Legacy Software Rendering Path, который по-прежнему сохраняется на май 2014 года, но скоро будет удален полностью в Blink. ")

Вот отличная статья с дополнительной информацией: Ускоренный рендеринг в Chrome.

Firefox

1. Общее ускорение

  • Перейдите в Настройки Firefox
  • Перейдите на вкладку Дополнительно
  • Перейдите на вкладку Общие
  • Проверьте состояние флажка Использовать аппаратное ускорение при наличии.

Если ускорение включено, то:

2. Ускорение уровня

  • Перейдите к about:config
  • Поиск layers.acceleration.disabled

Если ускорение уровня включено (если значение false), то:

3. Ускоренные окна с графическим процессором

  • Перейдите к about:support
  • В разделе Графика проверьте значение Ускоренные Windows GPU

Если он не начинается с 0/ и отображается API-интерфейс рендеринга (например, OpenGL, Direct3D), тогда активируется ускорение GPU.

Safari

  • Включить меню отладки Safari, выполнив эту команду в терминале:
    defaults write com.apple.Safari IncludeInternalDebugMenu 1
  • Открыть (или перезапустить) Safari
  • В меню Safari Отладка проверьте состояние параметра Disable Accelerated Compositing в подменю Рисование/Композиция флагов

Ускоряемые свойства CSS

Единственными переходами свойств CSS, которые могут быть аппаратно ускорены, являются те, которые происходят на этапе компоновки процесса рендеринга. Например:

Чтобы полностью воспользоваться ускорением, никакие свойства без компоновки не должны переходить. Например:

  • Переход только на transform: translate может получить полное преимущество ускорения (потому что элементный слой можно просто перекомпоновать с помощью графического процессора).
  • Переход на оба transform: translate и width почти не получит выигрыша от ускорения (потому что переход на width заставляет слой элемента перерисовываться ЦП для каждого кадра анимации).

Состав слоев и цветных границ

Механизм рендеринга браузера решает (на основе пользовательских предпочтений, стилей CSS и т.д.), чтобы дать элементу свой собственный слой компоновки.

Например, Chrome имеет этот список причин, а также имеет эту опцию в chrome://flags:

Композиция для RenderLayers с переходами
Включение этой опции приведет к тому, что RenderLayers с переходом на непрозрачность, преобразование или фильтр имеют свой собственный составной слой.

Если элементу не присвоен свой собственный слой, то никакие переходы CSS в этом элементе не будут ускорены.

transform: translate3d ( "быстрый ход" ) обычно заставляет элемент присваивать свой собственный слой.

Но даже если элементу был присвоен свой собственный слой, переходы по свойствам без компоновки (width, height, left, top и т.д.) до сих пор не могут быть ускорены, поскольку они происходят до этап компоновки (например, в макете или этапах краски). @ChrisSpittles Вот почему вы не увидели визуального улучшения после добавления transform: translate3d.

Большинство браузеров могут отображать цветные границы вокруг композитных слоев, чтобы их было легко идентифицировать для разработки/отладки:

Chrome

Отображение границ композиционных слоев может быть выполнено одним из двух способов:

  • Для всех страниц - перейдите в chrome://flags и включите границы слоя композитного рендеринга ( "Отрисовывает границу вокруг композитных слоев рендера, чтобы помочь отлаживать и изучать компоновку слоев" ). Для этого вам потребуется перезапустить Chrome.
  • Для отдельных страниц. Откройте "Инструменты разработчика", затем откройте "Ящик", выберите вкладку "Рендеринг" и включите Показывать слои композитного слоя. Теперь открытие инструментов разработчика на любой странице приведет к тому, что границы слоев будут показаны на этой странице.

Теперь активируйте переход CSS на элемент. Если у него есть цветная рамка, тогда у него есть свой собственный слой композиций.

Цвета границ и их значения определены в debug_colors.cc. Подробнее здесь и здесь.

Firefox

Чтобы нарисовать границы композитных слоев:

  • Перейдите к about:config
  • Найдите layers.draw-borders и включите его

Теперь активируйте переход CSS на элемент. Если у него есть цветная рамка, тогда у него есть свой собственный слой композиций.

Цвета границ и их значения определены в Compositor::DrawDiagnosticsInternal.

Safari

(Это не работает для меня с Safari 7.0.3, но похоже, что это работало для некоторых людей еще в прошлом году.)

Запустите Safari с терминала с помощью набора переменных CA_COLOR_OPAQUE boolean:

$ CA_COLOR_OPAQUE=1 /Applications/Safari.app/Contents/MacOS/Safari

Альтернативный метод:

$ export CA_COLOR_OPAQUE=1 
$ /Applications/Safari.app/Contents/MacOS/Safari

По-видимому, слои с аппаратным ускорением должны быть окрашены в красный цвет. Подробнее здесь и здесь.

Обновление:

Здесь альтернативный метод, который работает для меня в Safari 7.0.3 (кредит David Calhoun):

  • В меню Safari Отладка включите Показывать границы композиций в Подменю <Рисование/Композиция

Теперь активируйте переход CSS на элемент. Если у него есть цветная рамка, тогда у него есть свой собственный слой композиций.

Ссылки

Для получения более подробной информации ознакомьтесь с этими замечательными статьями:

Ответ 2

Сравнение производительности анимаций в разных рамках доказало, что CSS3 намного быстрее, чем jQuery, поскольку CSS2 использует непосредственно GPU, а не CPU.

Анимация на графическом процессоре - это не что иное, как аппаратное ускорение.

Существует еще одна последняя версия GSAP, которая в 20 раз быстрее, чем jQuery.

Вы можете просмотреть приведенную ниже ссылку, чтобы понять, как работают анимации и как работает CSS3. http://knowledge-cess.com/animation-and-the-role-of-gpu-a-performance-factor/

возможно, это похоже на вопрос - fooobar.com/info/91015/...