2012-03-01 4 views
3

Я на данный момент добавил CSS3 переход на мой сайт. Я не уверен, если это возможно, что он замедляет мой сайт, но все кажется мерцающим, и на переходы и флеш-видео есть такое «рывкое поведение».Перемещает ли переход CSS3 на веб-сайт?

Я использую Mozilla Firefox 10.0.02.

Я добавил следующее в мой CSS стилей:

*:link, *:visited, *:hover, *:active, *:focus { 
    -webkit-transition: color .25s linear, background-color .25s linear, border-color .25s linear; 
    -o-transition: color .25s linear, background-color .25s linear, border-color .25s linear; 
    -moz-transition: color .25s linear, background-color .25s linear, border-color .25s linear; 
    transition: color .25s linear, background-color .25s linear, border-color .25s linear; 
} 

Можете ли вы сказать мне, если это скорее мой браузер медлительность или, если это является CSS, я добавил и если, то, что доказательства?

Спасибо!

+0

Ну, это всегда ваш браузер медленный, но возможно, что это правила CSS, которые его вызывают. Вы пытались удалить правила, чтобы узнать, будет ли он быстрее? Это было бы логичным первым шагом для принятия –

+0

Какие браузеры/UA дают вам плохую производительность? Android известен своими плохими переходами CSS3 в 1.x и 2.x –

+0

@pekka Кажется, что быстрее без переходов .. –

ответ

9

Это потому, что вы добавили переходы ко всем этим состояниям.

Я бы изменить:

*:link, *:visited, *:hover, *:active, *:focus { 

в

a:link, a:visited, a:hover, a:active, a:focus, [...Other elements...] { 

Так что более целенаправленные. В противном случае, когда вы перемещаете мышь, запускается состояние зависания, заставляя браузер проверять переход.

+1

+1 для конкретного предложения по улучшению –

+1

Я должен указать (тем, кто не знает лучше), что ** это не селектор '*', который вызывает проблемы с производительностью ** (он должен быть оптимизирован из селекторов во всяком случае) узкое место падает прямо на применение переходов на слишком много элементов и пытается оживить слишком много вещей в результате. Вы можете делать всевозможные базовые вещи с помощью универсального селектора, и браузеры наверстают упущенное, но * переходы * являются дорогостоящими. – BoltClock

+1

Он работает лучше после цели, спасибо! –

1

Любая анимация добавит нагрузку на графические системы, но если вы комбинируете переходы CSS и плагины, такие как Flash, вы сделаете нагрузку хуже (поскольку слои должны быть объединены). Установлен ли ваш флэш-wmode в прозрачный? если да, попробуйте использовать непрозрачный, так как это остановит флэш-анимацию от заботы о том, что происходит внизу (технически говоря, она становится наложением в видеодрайвере).