Производительность и загрузка DOM с использованием префиксов производителя для CSS3

Некоторое время мне это было интересно.

Свойства css3 еще не стандартизированы, но могут быть реализованы браузерами с использованием префикса для конкретного браузера. Например, можно использовать border-radius, и он отлично работает в современных браузерах. Однако для предыдущих версий поставщиков браузеров мы можем использовать для работы префиксы конкретных поставщиков, такие как -moz, -webkit и т. Д.

Теперь для своей страницы я использовал градиенты и border-radius, создал пару классов, которые их используют, и применил эти классы повсеместно.

Что из следующего лучше делать?

  1. Используя javascript, чтобы определить, есть ли поддержка, и использовать свойства, если они поддерживаются, если указанное выше неверно, проверьте пользовательский агент и примените соответствующие свойства поставщика.

  2. Использование всех префиксов браузера в классах и разрешение браузеру использовать то, что ему подходит.

Что меня интересует и беспокоит, так это производительность и время загрузки DOM.


javascript html css vendor-prefix
person Pranav 웃    schedule 06.02.2012    source источник
comment
Вам больше не нужен префикс для border-radius.   -  person Šime Vidas    schedule 06.02.2012
comment
Отключите JavaScript в вашем браузере. Загрузите свою страницу. Рендеринг медленный? Если вы не можете заметить задержку, все в порядке.   -  person Šime Vidas    schedule 06.02.2012
comment
Несмотря на то, что на самом деле это не требуется в Chrome, к сожалению, у меня есть много людей, посещающих мой сайт, которые используют Firefox 3.5.x, 3.6.x, который требует префикса -moz   -  person Pranav 웃    schedule 06.02.2012
comment
Обратите внимание, что браузеры игнорируют свойства с префиксами поставщиков, отличными от их собственных. Таким образом, каждый браузер должен обрабатывать только одно дополнительное свойство. Не думаю, что это может быть проблемой с производительностью. На крупных сайтах, таких как Facebook, вероятно, в несколько раз больше правил CSS, чем на вашем сайте, и у них все в порядке.   -  person Šime Vidas    schedule 06.02.2012
comment
Просто просмотрел стили Google, интересно, что Google действительно использует префиксы, хотя я смог найти префикс mozilla только 7 раз и префикс Opera 2 раза во всем коде. Даже StackOverflow, кажется, упомянул префиксы в самом CSS, и там вроде бы пару записей для него.   -  person Pranav 웃    schedule 06.02.2012

Ответы (3)


arrow_upward
6
arrow_downward

Что из следующего лучше делать?

  1. Используя javascript, чтобы определить, есть ли поддержка, и использовать свойства, если они поддерживаются, если указанное выше неверно, проверьте пользовательский агент и примените соответствующие свойства поставщика.

  2. Использование всех префиксов браузера в классах и разрешение браузеру использовать то, что ему подходит.

Вариант 1 заключается в использовании JavaScript для обнаружения поддержки, затем условном написании кода CSS с префиксами или без них и разрешении браузеру применить стили.

Вариант 2 заключается в простом использовании CSS и игнорировании браузером префиксов / объявлений, которые он не понимает.

Как видите, вариант 1 вводит дополнительный уровень (JavaScript), в котором нет необходимости, если вы просто хотите использовать некоторые функции CSS3, где это возможно. Вариант 2 будет наиболее эффективным решением.

person Mathias Bynens    schedule 06.02.2012
comment
@MathiasBynens, Обычно, когда я просматриваю код с помощью инспектора Chrome, я вижу другие префиксы браузера в css. Не был до конца уверен, что это полностью игнорируется браузером. - person Pranav 웃; 06.02.2012

arrow_upward
1
arrow_downward

Как всегда в случае с подобными вопросами, ответ - зависит от обстоятельств. Это зависит от того, какие префиксы вы используете, как часто они встречаются в HTML, от какого браузера вы тестируете и т. Д.

Решение состоит в том, чтобы написать код, профилировать его и выяснить. Очень часто вы обнаружите, что производительность в любом случае приемлема.

person Dan Blows    schedule 06.02.2012
comment
Лично я использую Modernizr и стиль против добавляемых им классов. Однако это может быть быстрее или медленнее в зависимости от множества факторов. HTML5Please дает много советов по новым элементам CSS3. - person Dan Blows; 06.02.2012

arrow_upward
0
arrow_downward

Я использую вариант 2 - добавляю все префиксы браузера (а также версию без префиксов) в CSS:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Браузеры будут пропускать объявления, которые они не понимают, без каких-либо проблем (хотя ваш CSS не проверяется), продолжая применять стили. Вероятно, лучше всего использовать генератор CSS, чтобы не вводить каждый префикс.

Вам следует избегать использования Javscript для обнаружения функций CSS, поскольку это нарушает работу разделение проблем - CSS предназначен для представления, а Javascript - для поведения.

person whostolemyhat    schedule 06.02.2012