Анализ принципа оптимизации динамических эффектов css3 с уровня рендеринга браузера

внешний интерфейс CSS
Анализ принципа оптимизации динамических эффектов css3 с уровня рендеринга браузера

введение

При разработке h5 нам часто нужно реализовать некоторые динамические эффекты, чтобы улучшить визуальный эффект страницы.Когда мы говорим о динамических эффектах, мы неизбежно думаем о теме динамической оптимизации производительности:

  • Сократите операции DOM страницы, вы можете использовать CSS для достижения анимации без строки кода js
  • Используйте абсолютное позиционирование, чтобы избавиться от DOM из потока документов, уменьшив перестановку страниц (ретрансляцию).
  • Включить аппаратное ускорение с помощью свойств CSS3 3D.

Итак, какова связь между CSS3 и оптимизацией динамических эффектов?В этой статье будет описан принцип оптимизации динамических эффектов CSS3 с уровня рендеринга браузера.

Процесс отображения страницы браузера

На домашней странице нам нужно понять процесс отображения страницы в браузере:
浏览器页面展示过程

  • Javascript: в основном отвечает за логику делового взаимодействия.
  • Стиль: соответствует соответствующему стилю CSS для каждого элемента DOM в соответствии с селектором CSS.
  • Макет: конкретно рассчитайте размер и положение элемента DOM, отображаемого на экране.
  • Paint: реализует визуальные эффекты (цвета, границы, тени и т. д.) элемента DOM, обычно выполняемые несколькими слоями рендеринга.
  • Составной: когда каждый слой отрисовывается, браузер объединяет все слои в один слой в разумном порядке и отображает его на экране.

В этой статье мы сосредоточимся наCompositeОбработать.

Принцип рендеринга в браузере

в обсужденииCompositeПрежде нам также необходимо понять принцип рендеринга браузера.浏览器渲染原理

Из этого рисунка мы можем найти:

  • DOM 元素а такжеLayout ObjectЕсть отношение один к одному
  • Вообще говоря, те, с одним и тем же координатным пространствомLayout Objectпринадлежат к одному и тому жеPaint Layer (渲染层),пройти черезposition、opacity、filterи т. д. Свойства CSS могут создать новый слой краски
  • какой-то особенныйPaint Layerбудет считатьсяComposite Layer (合成层/复合层), составной слой имеет отдельныйGraphics Layer (图形层), а те слои рисования, которые не являются составными слоями, будут иметь общий родительский слой с графическим слоем.

Graphics Layer

Экранные визуальные эффекты, которые мы видим в повседневной жизни, можно понять следующим образом:GPUКомпозиция отображается на экране, а наименьшая единица растрового изображения — это пиксель. Как показано ниже:

Так как же получается растровое изображение?Graphics Layerсыграли ключевую роль, каждыйGraphics LayerИмеетсяGraphics Context, растровое изображение хранится в общей памяти,Graphics Contextбудет отвечать за обработку растрового изображения как纹理загрузить наGPU, а затем графический процессор выполняет композитный рендеринг. Как показано ниже:

Какую роль CSS играет в рендеринге браузера

Первое впечатление большинства людей от CSS3 состоит в том, что аппаратное ускорение можно включить с помощью свойств 3D ​​(таких как преобразование).При рефакторинге проекта многие студенты склонны:

  1. Измените 2D-преобразование на 3D-преобразование

2. Измените движение слева (сверху, снизу, справа) на 3Dtransform.
Но с включенным аппаратным ускорением底层原理На самом деле это将 Paint Layer 提升到了 Composite Layer Все следующие методы используют один и тот же эффект:

  • 3D-свойства включают аппаратное ускорение (3D-преобразование)
  • will-change: (непрозрачность, преобразование, верх, лево, низ, право)
  • Используйте фиксированное или липкое позиционирование
  • Примените анимацию (активировано) или переход (активировано) к непрозрачности, преобразованию и фильтру. Обратите внимание, что анимация и переход должны быть в激活状态просто делать

Напишем два абзацаdemoКод, позволяющий подробно проанализировать реальную ситуацию

demo1. 3D-свойства включают аппаратное ускорение (3D-преобразование)

.composited{
  width: 200px;
  height: 200px;
  background: red;
  transform: translateZ(0)
}
</style>

<div class="composited">
  composited - 3dtransform
</div>

Вы можете видеть, что составной слой создается из-за используемого преобразования CSS 3D.

demo2. Примените анимацию (активировано) или переход (активировано) к непрозрачности, преобразованию, фильтрации

<style>
@keyframes move{
  0%{
    top: 0;
  }
  50%{
    top: 600px;
  }
  100%{
    top: 0;
  }
}
@keyframes opacity{
  0%{
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

#composited{
  width: 200px;
  height: 200px;
  background: red;
  position: absolute;
  left: 0;
  top: 0;
  
}
.both{
  animation: move 2s infinite, opacity 2s infinite;
}
.move{
  animation: move 2s infinite;
}
</style>

<div  id="composited" class="both">
  composited - animation
</div>
<script>
setTimeout(function(){
  const dom = document.getElementById('composited')
  dom.className = 'move'
},5000)
</script>

Здесь мы определяем дваkeyframes(move、opacity), и еще дваclass(both、move),вначале#compositedизclassName = 'both', после 5-секундной задержки,className = 'move', давайте посмотрим на фактические изменения браузера.

вначале:#composited 创建了一个复合层，并且运动时 fps 没有波动，性能很稳定 起初

Через 5 секунд:复合层消失，运动时 fps 会发生抖动，性能开始变得不再稳定 5秒后

Как просмотреть составные слои и частоту кадров

в браузереDev ToolsвыберитеMore toolsи проверьтеRenderingсерединаFPS meter

Оптимизация производительности анимации

Ранее мы упоминали о конвейере рендеринга, связанном с рендерингом страницы.На самом деле, с точки зрения производительности,最理想的渲染流水线是没有布局和绘制环节的, чтобы добиться вышеуказанного эффекта, нужно использовать только те, которые вызывают толькоCompositeхарактеристики.
В настоящее время только два свойства удовлетворяют этому условию:transformsа такжеopacity(Поддерживается только некоторыми браузерами).
Связанную информацию можно найти по адресу:css Triggers

Суммировать

Вкратце, переход на композитный слой имеет следующие преимущества:

  • Растровое изображение составного слоя будет составлено графическим процессором, который быстрее, чем обработка процессором.
  • Когда вам нужно перекрасить, вам нужно перекрасить только себя, это не повлияет на другие слои
  • Для эффектов преобразования и прозрачности некоторые браузеры не запускают Layout и Paint.Дополнительную информацию см. в следующих разделах:css Triggers

недостаток:

  • Создание нового слоя композиции не бесплатно, оно потребляет дополнительную память и ресурсы управления.
  • После того, как текстура будет загружена, она будет обработана графическим процессором, поэтому нам также необходимо учитывать пропускную способность между процессором и графическим процессором и сколько памяти доступно графическому процессору для обработки этих текстур.

Большинству людей нравится использовать 3D-свойство translateZ(0) для так называемого аппаратного ускорения для повышения производительности. Но нам также необходимо анализировать фактическую производительность страницы и постоянно улучшать тест, что является правильным способом оптимизации производительности.

использованная литература

Оптимизация производительности беспроводных сетей: Composite — команда внешнего интерфейса отдела Tao

Категории