Выполнение анимации CSS3 (простая анимация, еще не работающая в инструментах разработчика Chrome)

Я пытаюсь найти способ сделать переход страницы CSS хорошо работать в google chrome.

В инструментах разработчика Chrome на временной шкале я заметил некоторые красные маркеры, и все они говорят одно и то же: Длинные временные рамки - это показатель эффективности jank и плохой рендеринга. Подробнее читайте в руководстве по основам веб-поиска по эффективности рендеринга.

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

У меня есть более простая демонстрация, и я все еще получаю красный маркер: http://codepen.io/anything/full/qOOpza/

.page {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#ccc;
  &--1 {
    background:green;
  }
  &--2 {
    background: yellow;
  }
  &.moveToRight {
        animation: moveToRight ease .5s;
        animation-fill-mode: forwards;
    }

    &.moveToLeft {
        animation: moveToLeft ease .5s;
        animation-fill-mode: forwards;
    }
}


@keyframes moveToRight {
    from { }
    to { transform: translateX(100%); }
}

@keyframes moveToLeft {
    from { }
    to { transform: translateX(0); }
}

Ответ 1

Я играл с демоверсией ytour, и я нашел 2 проблемы:

Во-первых, переход от translate to translate3d улучшает (по крайней мере, в моей системе) немного производительность. Итак, пишу это

@keyframes moveToRight {
    from {     transform: translate3d(0%, 0px, 0px);  }
    to {     transform: translate3d(100%, 0px, 0px);  }
}

лучше. (Это было сказано несколько раз раньше, но всегда полезно проверить).

Кроме того, новое свойство должно несколько помочь. установка

будет изменено: transform;

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

Во-вторых, кажется, что проблема связана с тем, как Chrome собирает статистику. У вас включен "Скриншоты". И это, по-видимому, основная причина задержек, время, которое Chrome должен отображать и хранить скриншоты.

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

По крайней мере, в моем случае изменение обеих проблем приводит к тому, что красные маркеры почти исчезают.

И в остальных отмеченных фреймах, похоже, не проблема с производительностью. Обратите внимание на скриншот, что продолжительность кадра составляет 25,57 мс, но время процессора составляет 1,239 мс.