Ответ 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 будут благодарны за это.