CSS3 - Каковы наилучшие практики производительности?

В прошлом году я долго читал о производительности javascript, узких местах и ​​лучших практиках. В моем последнем проекте я использую CSS3 с резервными файлами javascript/jquery для основных анимаций и эффектов, таких как зависания, и мне интересно экспериментировать с CSS3 далее.

Существуют ли проблемы с производительностью CSS3?

Если да, то какие лучшие практики?

Например, transition: all 150ms ease-out; использует больше памяти, чем transition: opacity 150ms ease-out, background-color 150ms ease-out;?

[пожалуйста, не просто ответьте на мой пример вопроса!]

ОТВЕТЫ

Ответ 1

О да! Если вам нравится возиться с производительностью, вы будете рады узнать, что в CSS3 есть много проблем с производительностью.

  • Перерисовать и Reflow.. Его довольно легко вызвать ненужные перерисовки и переплавки и, таким образом, сделать всю задержку страницы. Читайте: http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ Экстремальный пример: http://files.myopera.com/c69/blog/lag-me.html
  • Прокрутка и наведение. При прокрутке или зависании браузер должен отображать новый контент. Webkit здесь шикарный, поскольку он кэширует страницы как статические изображения, поэтому он не отображает страницу при прокрутке. Но - вы можете обойти эту оптимизацию, используя такие вещи, как прозрачный фон в блоке, который вы прокручиваете, добавив поворот на зависании, добавив position:fixed липкие заголовки/нижние колонтитулы с и так далее - эффект будет осторожен в разных браузерах, Opera выглядит наиболее в настоящее время.
  • Ящик-тень зла. Коробчатые тени имеют различное качество рендеринга в разных браузерах (низкое количество Webkit, высоко в Opera/IE9, варьируется между версиями Firefox), и, таким образом, их влияние на производительность разные между разными браузерами - тем не менее, теневая тень inset и тени с большим радиусом распространения могут вызывать видимые зависания при перерисовке в любом браузере.
  • Поплавки, таблицы и их друзья злы. Сначала кажется сумасшедшим, но читайте эту статью - http://chikuyonok.ru/2010/11/optimization-story/ - это может сэкономить вам немного волос на голове. Основная идея - дети плавающих элементов вызывают перекосы цепей при модификации вплоть до конца.
  • Радиус границы очень дорог, даже более дорогой, чем градиенты. Не влияет на макет, но влияет на перерисовку. http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/
  • Градиентный лаг. Градиенты CSS - это очень крутой новый инструмент, я большой поклонник их. Тем не менее, только пара тестов показала, что вы не должны их использовать, если вы планируете иметь множество элементов с градиентом и требуют гибкого интерфейса:( Однако есть обходное/ручное использование - использование холста для визуализации градиентных изображений и установки их как фон с помощью URL-адреса данных.
  • Прозрачность дорогая. Если у вас есть несколько движущихся элементов, которые пересекаются друг с другом и полупрозрачны (непрозрачность < 0, цвет rgba, png, закругленные углы (!)) - ожидайте отставание. Часто можно разработать, ограничив количество прозрачных элементов, которые могут накладываться.
  • Переходы лучше, чем JS, но... Firefox не может правильно отображать переходы, если вы применяете их к более чем 150 элементам одновременно. Opera не может применять переходы до и после. IE9 не поддерживает их вообще. Тестируйте, прежде чем использовать их, но в целом - они быстрее, чем аналоги JS (jQuery.animate).
  • Следите за загрузкой процессора.. Его трудно измерить использование перекрестного браузера памяти (но вы можете сделать это в хромовых и интерполировать результаты с некоторым количеством соли), но его легко наблюдать за процессором -usage (через Process Explorer или системные инструменты). Спайки покажут вам места, где вам нужно ваше внимание.
  • Старые браузеры старые. Не пытайтесь модернизировать IE6, Firefox 2, Safari 3. Эти браузеры никогда не должны обрабатывать интересные новые вещи. Оставь их. Просто используйте базовый контент с основными стилями. Остальные пользователи IE6 будут благодарны за это.

Ответ 3

Чтобы проверить это, вам нужно сделать свою анимацию 500 или 1000 раз и время.

Мультфильмы Canvas и HTML5 намного больше, чем flash. Flash на iPhone превосходит альтернативы HTML5. Я бы сделал свои анимации, аудио и видео, используя JQuery, поскольку гибкость обмена HTML5 для удобства.