CSS: встроенный стиль работает медленнее?

Question

Что делает быстрее?

// Just HTML
<div id="holder">
    <div style="float:left;">test1</div>
    <div style="float:left;">test2</div>
    <div style="float:left;">test3</div>
</div>

ИЛИ

// CSS
#holder div{
    float:left;
}

// HTML
<div id="holder">
    <div>test1</div>
    <div>test2</div>
    <div>test3</div>
</div>

Answer 1

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

Теперь с точки зрения времени загрузки, это другая история. Да, встроенные стили технически быстрее, чем внешние таблицы стилей, потому что вы делаете на один запрос меньше в верхней части страницы, но использование внешней таблицы стилей гораздо предпочтительнее для удобства сопровождения кода. Только когда вы загружаете несколько таблиц стилей, производительность начинает становиться проблемой, поскольку каждый раз, когда вы обращаетесь к новой таблице стилей, браузер должен отправить новый запрос. Решение? Просто объедините таблицы стилей в один.

Answer 2

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

Проверьте новую страницу Google 404: у них даже есть изображения в теге стиля:

http://www.google.com/123412312

Answer 3

Я бы предположил (из-за задействованного HTTP-запроса), что внешний CSS будет медленнее , но встроенные стили ужасны для удобства обслуживания и сводят на нет весь смысл CSS, который заключается в централизации значений для цвета и макетатак что вам не нужно перебирать каждый элемент, чтобы изменить стиль.

Также смотрите this

Answer 4

С точки зрения просмотра не должно быть никакой разницы, вы можете проверить это с помощью инструментов разработчика браузеров.Помимо возможности сопровождения кода, уже упомянутой в других ответах, существует также проблема специфики встроенных правил.Поскольку они имеют наивысшую специфичность (1,0,0,0), они перекрывают все другие каскады.Таким образом, вы должны тщательно изучить ваш вариант использования, а не принимать решение на основе критериев эффективности