Брат деи, я слышал, что твоя анимация сильно застряла?

программист браузер Chrome CSS

Введение: несколько недель назад, в связи с деятельностью компании, мне нужно было сделать крутойH5анимация, свирепыйcodingПотом я обнаружил, что при беге он цепляется, как собака. В то время я отчаянно хотел стать монахом. К счастью, в группе были более опытные боги анимации, которые помогали приспособиться и плавно преодолевать трудности.

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

Содержание этой статьи:

Почему анимация кажется зависшей?

Прежде чем ответить на этот вопрос, мы должны понять вопрос, почему мы чувствуеманимация движется?

  1. Принцип реализации анимации заключается в использовании явления «постоянства зрения» человеческого глаза для непрерывного воспроизведения нескольких неподвижных изображений в течение короткого периода времени, так что невооруженный глаз будет иметь иллюзию из-за визуального остаточного изображения и ошибочно думаю, что изображение "движется".

  1. Частота обновления большинства устройств составляет 60 раз в секунду (1000/60 = 16,6 мс), что означает, что рендеринг каждого кадра в браузере должен быть завершен в течение 16 мс, после чего начнется рендеринг страницы. Пользовательский опыт.

Подводя итог, мы можем подумать, что большая причина для карты анимации заключается в том, чтоFPS(частота кадров)Вызвано слишком низким, то есть изображение каждого кадра не может быть гарантировано в16msРабота по рендерингу завершена в установленные сроки, поэтому мы будем чувствовать себя заикаясь.

Объясните причины задержки. Вам интересно, что происходит в процессе рендеринга каждого кадра, что приводит к превышению времени его рендеринга?16ms ?

Теперь о нашей второй части,Браузерный рендеринг и процесс рисования

Браузерный рендеринг и процесс рисования

отWebkitВ качестве примера анализируется процесс рендеринга браузера:

Вкратце можно представить следующие шаги:

  • Обработка данных разметки HTML и создание дерева DOM.

  • Обработка данных разметки CSS и создание дерева CSSOM.

  • Объедините дерево DOM с деревом CSSOM, чтобы создать дерево рендеринга.

  • Макет: вычисляет размер и положение каждого элемента DOM, отображаемого на конечном экране. Поскольку расположение элементов веб-страницы является относительным, любое изменение положения одного из элементов приведет к изменению связи других элементов.Этот процесс называетсяreflow (Перекомпоновка или перестановка).

  • Paint: рисует текст, цвета, изображения, границы, тени и т. д. элементов DOM на нескольких слоях.

  • составной (объединение слоев рендеринга): объединение слоев в разумном порядке и отображение их на экране.

Рендеринг каждого кадра проходит через указанные выше шаги и представляется перед пользователем, когда сумма времени этих шагов> 16ms, пользователь будет чувствовать себя застрявшим.

существуетАнализ производительности анимациичасть, сосредоточимся на объединенииLayout, Paint, compositeЧасть специально для анализа причин зависаний анимации и методов оптимизации. Перед этим давайте разберемся с мощнымchromeПредоставляет инструменты анализа производительности, чтобы мы могли лучше проанализировать проблему.

Внедрение мощного инструмента анализа производительности Chrome

  • performance

При использовании инструмента «Производительность», чтобы избежать влияния на производительность других плагинов Chrome на странице, лучше открывать страницу в режиме инкогнито.

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

Сосредоточьтесь на том, что отмечено красным на изображении ниже:

FPS: это показатель, тесно связанный с производительностью анимации, он представляет собой количество кадров в секунду. Чем выше зеленая полоса на рисунке, тем выше частота кадров и плавнее изображение. Если появляется красный блок, он представляет собой длинный временной интервал и, вероятно, застрял. На картинке преобладает зеленый цвет с редкими красными блоками, что указывает на то, что производительность веб-страницы неплохая, но еще есть возможности для оптимизации.

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

резюме: Соотношение затрат времени на каждую часть в процессе рендеринга.

  • Layers

Вы были глубоко потрясены этим высокоуровневым интерфейсом? ! !

СконцентрируйсяPaint flashing, Layer borders, FPS meter:

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

  • Границы слоя: составные слои

    1. Желтая рамка: элементы с анимированными 3D-преобразованиями визуализируются в новом составном слое.
    2. Синяя сетка: эти плитки можно рассматривать как единицу ниже слоя, эти области являются RenderLayer.

  • Измеритель FPS: мониторинг производительности графического процессора

    1. Частота кадров: Частота кадров.
    2. GPU Raster: растр GPU (по умолчанию включен).
    3. Память графического процессора: использование графического процессора.

В общем, правильноchromeКраткое введение в некоторые инструменты анализа производительности говорит о многом! ! ! Давайте напишем несколько анимаций для практики! ! !

Теперь приступим к нашей самой важной части! ! !Анализ производительности анимации на практике

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

Откройте в браузере следующий код:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .react {position: absolute;width: 100px;height: 100px;background: #f00;animation: react-run 3s linear 0s infinite;}
        @keyframes react-run {
            0% { top: 0px;left: 0px;}
            25% {top: 0px;left: 200px;}
            50% {top: 200px;left: 200px;}
            75% {top: 200px;left: 0px;}
            100% {top: 0px;left: 0px;}
        }
    </style>
</head>
<body>
    <div class="react"></div>
</body>
</html>

результат операции:

  • Layers

  • performance

Анализ производительности:

  1. Движущиеся квадратики на картинке постоянно переставляются и перерисовываются.

  2. Использование памяти GPU составляет от 2,4 до 4,9.

  3. Время, затрачиваемое на перестановку и перерисовку за одну секунду, равно7.3msи4.9ms.

Вот еще один момент, который стоит отметить:

  • Каждый раз, когда элемент перемещается в растр, память удваивается.2.4стать4.9.

Как показано ниже:

После того, как слой растрирован, он сохраняется в кусках.GPUВ памяти при перемещении элемента по растру меняются оба куска памяти, поэтому потребление естественно удваивается! ! !

Хорошо, теперь включим легендарный3DУскорение двигателя! ! !

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .react {position: absolute;
        width: 100px;
        height: 100px;
        background: #f00;
        animation: react-run 3s linear 0s infinite;
        transform: translate3d(0, 0, 0);
        }
        
        @keyframes react-run {
            0% {transform: translate3d(0, 0, 0);}
            25% {transform: translate3d(200, 0, 0);}
            50% {transform: translate3d(200, 200, 0);}
            75% {transform: translate3d(0, 200, 0);}
            100% {transform: translate3d(0, 0, 0);}
        }
    </style>
</head>

<body>
    <div class="react"></div>
</body>

</html>

результат операции:

  • Layers

  • performance

Анализ производительности:

  1. Нет перестановки и перерисовки движущихся квадратиков на картинке, сливается только один слой.

  2. Использование памяти графическим процессором почти равно нулю.

  3. Время, затрачиваемое на перестановку и перерисовку за одну секунду, равно0msи0ms, время слияния слоев89us.

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

  • НеоткрытыйGPUускорить:
  • включиGPUускорить:

Написав сюда, у вас могут возникнуть вопросы, почему он включен?GPUУскорить без перестановок и перерисовок? Все ли анимации включены?GPUУскоряйся, станет быстрее?

Давайте проанализируем эти два вопроса:

1. Зачем открыватьGPUУскорить без перестановки и перекраски?

Обратите внимание на картинку выше:

наGPUПри ускорении движущийся красный квадрат запускает новый композитный слой, так что не более重排и重绘, за раз требуется только один слой композитинга.

2. Все ли анимации включены?GPUУскоряйся, станет быстрее?

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

следующее (GPUвысокое использование памяти):

Подводя итог: разумное открытиеGPUУскорение, создание новых композитных слоев может значительно повысить производительность.

Итак, как можно создать новые составные слои?

Про-тест эффективные методы:

  • использоватьcssАтрибуты:

    1. transform: translate3d(0, 0, 0);
2. will-change: '将会发生变化的属性';

  • Этикетка:

    <video></video>
<canvas></canvas>

Суммировать

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

  1. Почему он чувствует себя застрявшим?
  2. Как браузер отображает каждый кадр?
  3. как пользоватьсяchromeИнструменты разработки для анализа производительности анимации?
  4. GPUВ чем разница между ускоренным и обычным рендерингом?
  5. Как мы должны начатьGPUускорить?

Анализ проблемы зависания анимации, не похожей на поискjsВверхbug, есть логика, которую нужно найти, поэтому, когда мы сталкиваемся с проблемами, мы можем лучше находить проблемы, только понимая основные принципы и комбинируя инструменты анализа.

Категории