Производительность и загрузка DOM с использованием префиксов конкретных поставщиков для CSS3 - PullRequest
Новая
       17

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

3 голосов
/ 06 февраля 2012

Мне было любопытно какое-то время с этим сейчас.

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

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

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

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

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

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

Ответы [ 3 ]

6 голосов
/ 06 февраля 2012

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

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

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

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

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

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

1 голос
/ 06 февраля 2012

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

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

0 голосов
/ 06 февраля 2012

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

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

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

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

...