CSS - Оптимизация закругленных углов для скорости

Question

Я пытаюсь оптимизировать свой сайт по скорости.Раньше я использовал изображения для закругленных углов, но теперь я изменил их с помощью CSS-правил border-radius и -moz-border-radius.Какой путь лучше для скорости?Раньше я думал, что правила CSS быстрее, но я видел много сайтов, рассказывающих о спрайтах CSS, и теперь я немного запутался.Да, и меня не волнует совместимость с IE, поэтому вы можете предложить любой метод, который захотите.

Answer 1

Скорость выглядит так: CSS> спрайты> отдельные изображения. Спрайты - это когда вместо отдельных изображений для углов вы используете одно изображение и нарезаете / позиционируете его с помощью CSS. Это толстее, потому что тогда вы загружаете только одно изображение. CSS самый быстрый, потому что ему не нужно ничего скачивать.

Answer 2

Для тех браузеров, которые поддерживают radius свойства CSS, используйте их. Они определенно быстрее, потому что изображение не нужно загружать, и они могут быть обработаны с помощью собственного движка браузера.

Для тех (более старых) браузеров, которые этого не делают, примените обходной путь на основе изображений.

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

Answer 3

Я бы порекомендовал CSS Sprites. Это хороший учебник: http://bavotasan.com/tutorials/simple-rounded-corners-with-a-css-sprite/

Answer 4

Оба одинаковы, за исключением того, что спецификации CSS3 еще не завершены, Mozilla реализовала border-radius с префиксом -moz- вендора.Вам понадобится эта версия -webkit- для закругленных углов для работы в браузерах Webkit (Chrome, Safari) и Mozilla (Firefox).

Что касается скорости ... неясно, говорите ли вы о скорости передачи или рендеринга.В любом случае я бы предположил, что разница незначительна, и вы должны использовать все три для максимальной поддержки браузера (за исключением IE, конечно)