Я часто слышу, как люди говорят:
Для плавной анимации на мобильном терминале следует использовать аппаратное 3D-ускорение.
В последнее время я глубоко разобрался в деталях некоторых ядер браузеров и чувствую, что в нем действительно есть подводные камни. . .
Что посмотреть из недавнего »Инсайдер технологии WebKit«Кстати, во второй главе представлена структура веб-страницы, в которой упоминается способ аппаратного ускорения Webkit, который помещает элементы, которые необходимо отобразить, в определенный «Композитный слой», который можно открыть в консоли Chrome. так:
После выбора «Показать границы композитного слоя» вы увидите, что элемент с анимированным 3D-преобразованием будет обведен желтой рамкой, что указывает на то, что он помещен в новый «композитный слой» для рендеринга, который выглядит следующим образом:
Тонкая синяя линия — это «плитка» при отображении браузером. Когда браузер отрисовывает страницу, он будет отображать плитки только в пределах определенного диапазона видимой области, чтобы снизить нагрузку на производительность, а желтая рамка представляет собой этот элемент. визуализируется в специальном составном слое, а не в том же слое, что и основной документ
Тогда я думаю, что этот взгляд очень интересен, посмотрел на внутренний проект, просвещенный взгляд, был напуган мочи:
Когда в этом проекте все элементы были ускорены с помощью 3D? !
После тщательного осмотра этих обрамленных элементов нет абсолютно никаких признаков необходимости рендеринга составного слоя, и я действительно пищаю. . . Я начал удалять элементы один за другим, упрощая код, и вскоре обнаружил, что виновник здесь:
Присутствие этого элемента карусели в заголовке фактически приводит к тому, что все элементы с относительным и абсолютным позиционированием ниже помещаются в составной слой. . .
проверил некоторыематериал:
Критерии создания слоя
Когда элемент может получить свой собственный слой? Хотя эвристика Chrome со временем развивалась, на данный момент слой создается при выполнении любого из следующих условий:
- Свойство CSS для трехмерного или перспективного преобразования
- Элементы, использующие ускоренное декодирование видео
- Элементы с контекстом 3D (WebGL) или ускоренным контекстом 2D
- Гибридные плагины (например, Flash)
- Анимируйте собственную непрозрачность с помощью CSS или используйте анимированный элемент, преобразованный с помощью webkit.
- Элементы с ускоренными фильтрами CSS
- У элемента есть дочерний узел, который содержит составной слой (другими словами, у элемента есть дочерний элемент, который находится в его собственном слое).
- У элемента есть родственный элемент с более низким z-индексом, который содержит составной слой (другими словами, элемент отображается поверх составного слоя).
В основном последнее. Я думаю, что его китайский перевод не очень точен. Оригинальный текст на самом деле:
У элемента есть родственный элемент с более низким z-индексом, который имеет композитный слой (другими словами, он отображается поверх композитного слоя).
Это означает, что если есть элемент, одноуровневый элемент которого визуализируется в составном слое, и z-индекс этого одноуровневого элемента относительно мал, то этот элемент (независимо от того, применяются ли стили с аппаратным ускорением или нет) также будет помещен в составной слой. составной слой.
Самое ужасное, что браузер может создать композитный слой для всех относительно или абсолютно позиционированных элементов после того, как композитный слой будет отрендерен, поэтому это имеет эффект приведенного выше снимка экрана проекта. Мне было интересно, почему прокрутка этой страницы очень застряла, очевидно, что DOM не так много, и теперь кажется, что проблема здесь!
Поэтому я написал страницу, чтобы все увидели, насколько мощна эта штука:
Я разместил заголовок h1 на странице выше, применил анимацию translate3d, чтобы он отображался в составном слое, а затем создал 2000 списков за этим элементом, каждый список имеет изображение, заголовок и отображение даты, в котором изображение и отображение даты абсолютно позиционировано, а родительский контейнер li расположен относительно. Затем вы можете следовать вышеупомянутым инструкциям, чтобы открыть параметр «показать границы составного слоя» в Chrome, чтобы увидеть распределение составного слоя содержимого на этой странице:
Прямо как эта птичка, сложно представить, как такая страница будет зависать при прокрутке. Я использую машину Mac, и быстро перетаскивать полосу прокрутки хром очень сложно, тогда я написал простую операцию перемещения полосы прокрутки:
setInterval('document.body.scrollTop++', 0);
Затем используйте временную шкалу, чтобы получить производительность страницы:
Расчет «Композитных слоев» фактически требует96.206 ms! ! Это все еще в моей системе Mac, телефон действительно застрянет.
После размещения переключателя «Чтобы установить анимированные элементы z-index», щелкните флажок на странице, будем использовать JS к элементам H1, которые добавляют анимациюposition:relative а также z-index: 1, принцип этого подхода заключается в том, чтобы искусственно увеличить z-индекс элемента анимации, дать браузеру знать порядок слоев этого элемента, и не глупо будет ставить в список другие элементы с более высоким z-индексом, чем он. композитный слой. Посмотрите на этот эффект:
Просто установка более высокого z-индекса для элемента анимации может решить эту бессмысленную проблему добавления составных слоев, которая немного теряет дар речи. . . После этого используйте функцию перемещения полосы прокрутки, чтобы зафиксировать производительность страницы:
Это полностью нормализовалось!
Вы можете использовать браузер мобильного телефона «Android», который поддерживает «аппаратное ускорение», чтобы протестировать приведенную выше страницу, и разрыв в производительности до и после добавления z-index к элементам анимации очень очевиден.
Однако не все браузеры имеют эту проблему. У меня нет очевидной разницы между Safari и Firefox на моем Mac. Браузер QQ на моем телефоне Android кажется нормальным, а браузеры, такие как Cheetah, UC, Oppen и webview, значительно отличаются. , Это зависит от вас, чтобы проверить больше, чтобы узнать.
Подводить итоги:
При использовании аппаратного 3D-ускорения для повышения производительности анимации лучше всего добавить атрибут z-index к элементу, чтобы он мешал сортировке составных слоев, что может эффективно уменьшить количество ненужных составных слоев, созданных хромом, улучшить производительность рендеринга и Эффект оптимизации мобильного терминала особенно очевиден.
Вы можете проверить эту проблему сейчас, особенно для страниц, которые используют загрузку карусели и анимации.Эта проблема очень распространена. Кроме того, при отслеживании проблем с производительностью рекомендуется включать опцию "показывать границы составного слоя" Если на странице много желтых квадратов, это однозначно неправильно.
Наконец, я снова рекомендую книгу "Webkit Technology Insider". Ядро браузера для фронтенд-инженеров точно так же, как операционная система для бэкенд-инженеров. В конце концов, это хост-среда, в которой работают наши программы. Если вы знаете о нем больше, многие проблемы будут легко решены. Вычислять.
Если кто-то попросит вас порекомендовать технические книги по интерфейсу, дайте ему прочитать этот список -> 《Классические технические книги по интерфейсу》1 лайк1 ИзбранноеКомментарий