Разница в производительности внешнего CSS и встроенного стиля?

88

Один мой друг сказал, что использование <div style=""></div>вместо сжатого файла css, помещенного link hrefв заголовок, дает некоторый прирост производительности. Это правда?

css  performance  inline-styles 
— Джордж
источник
1
Насколько мне известно, они (примерно) одинаковы, но я не могу это проверить.
— Nightfirecat
3
Это могло бы пролить некоторый свет: mathiasbynens.be/notes/inline-vs-separate-file
— Судхир Бастакоти
1
Чтобы справиться с кошмарами обслуживания, связанными с встроенными стилями, потребуется значительное повышение производительности. Пока я не видел подтверждений этому.
— steveax
1
Для более старых версий IE прирост производительности ОЧЕНЬ значительный. Я видел, как таблицы HTML ведут себя как клей с использованием стилей CSS.
— Джонатан

Ответы:

90

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

Используя атрибут style, браузер рисует правило только для этого конкретного элемента, которым в данном случае является <div>элемент. Это сокращает время поиска для механизма CSS, чтобы определить, какие элементы соответствуют селектору CSS (например, a.hoverили #someContainer li).

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

Установка правил стиля на уровне элемента также заставит вас забыть о том, какие элементы стилизованы. Это также может иметь неприятные последствия при рисовании определенного элемента, когда вы можете перерисовывать несколько элементов вместе. Использование файлов CSS отделяет CSS от HTML и, таким образом, позволяет вам убедиться, что ваши стили верны и что их легче изменить позже.

Поэтому, если вы посмотрите на сравнение, вы увидите, что использование файла CSS дает гораздо больше преимуществ, чем стилизация на уровне элементов.

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

— Маурис
источник
4
Можете ли вы предоставить статистику с помощью профилировщика Chrome? Процессор и графический процессор являются дорогостоящими для мобильных устройств и планшетов, где расход заряда батареи огромен. Я думаю, есть компромисс. А в чем преимущество кеша? Браузер должен будет вычислить стиль для текущего элемента, и определение стилей будет более дорогостоящим, если существует много правил.
— Акаш Кава
28
Обратите внимание, что все недостатки, связанные с обслуживанием, исчезают, когда есть движок, который встраивает стили перед отправкой клиентам
— Моше Шахам
6
Недостатки, связанные с обслуживанием, также исчезают при использовании React + Radium.
— AjaxLeung
1
@AjaxLeung, без сомнения, то, что вы сказали с Шахамом, правда. Этот ответ был написан в 2011 году, когда еще не было доступно большинство современных инструментов.
— mauris
2
Да. Я просто добавлял комментарий для тех, кто видел этот ответ сегодня и позже.
— AjaxLeung
6

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

Когда вы используете таблицу стилей с помощью href, требуется еще один запрос к серверу, а затем синтаксический анализ файла после ответа. Во встроенных стилях этого нет, только прямой синтаксический анализ.

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

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

— Sebjwallace
источник
9
Этот ответ полностью игнорирует кеширование браузера. Таблицы стилей позволяют запрашивать стили только один раз и кэшировать их, уменьшая объем содержимого, отправляемого по сети.
— GeekOnCoffee
2
Этот ответ также игнорирует тот факт, что встроенные стили увеличивают размер HTML-файла. Потенциально, особенно при использовании повторяющихся встроенных стилей, в несколько раз больше, чем файл CSS. Кстати, браузеры могут загружать несколько файлов параллельно (и кэшировать их, как указано выше).
— Ян Ван дер Хаген,
5

Ответить на этот вопрос непросто, поскольку производительность в этом случае зависит от многих факторов (сложности селекторов CSS, размера документа и т. Д.). Однако, если мы возьмем единичный случай, то увидим, что класс CSS в целом быстрее, чем встроенный стиль:
встроенный стиль против класса CSS.

— С.Ермакович
источник
5
Совершенно уверен, что это тестирует скорость, с которой изменяется класс узла или атрибут стиля, а не скорость, с которой применяется стиль, о чем задается вопрос
— Сэм
@Sam Что вы имеете в виду под «скоростью применения стиля»? Можете ли вы предоставить тест для измерения этой скорости? Если вы посмотрите на тестовый код, вы увидите, что перекомпоновка страницы происходит на каждой итерации, что означает, что тест охватывает не только изменение класса / атрибута, но и фактическое влияние на страницу.
— s.ermakovich
Это может включать время для добавления стиля, но это также добавляет время. Что делать, если в документе уже есть тест класса или встроенный стиль без необходимости добавления JS. Я получаю скорость для разрешения CSS в любом случае и (я могу ошибаться), но я не думаю, что этот тест просто делает это, я думаю, что он выполняет дополнительную работу.
— Сэм
@Sam Этот тест игнорирует возможные следы загрузки CSS браузером и его обработки. В своем ответе я упомянул, что это единичный случай. Он просто измеряет эффективность применения стилей разными способами (встроенный или внешний). Это то, что сегодня делают типичные веб-приложения - изменение HTML-документа с JavaScript без перезагрузки страницы.
— s.ermakovich
О'кей, я имел в виду нединамически добавленные стили
— Сэм
3

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

— eciusr
источник
3
В этом суть механизма кеширования. Не требует доказательств.
— стронций
5
«Обналичить» не означает «обналичить»; а «сущности» - не факты.
— Иван Кастелланос
6
Ребята, это уже не эра Duke Nukem, мы не обналичиваем людей. Кэш с другой стороны ...
— Себас
3
Аргумент кеширования неприменим для одностраничных приложений, которые обычно загружают все сразу и генерируют страницы на лету.
— MindJuice
1

ИСТИНА - ДА

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

Нажмите на изображение, на которое вы ссылаетесь, и прочтите предупреждающие сообщения. ПОДСКАЗКА: Сохраните этот файл еще раз в качестве редактирования перед редактированием (тестированием).

С наилучшими пожеланиями, Дон

<!DOCTYPE html>
  <head>
    <style>
      div.grid
        {
        width:180px;
        height:42px;
        border:none;
        }
      img
        {
        width:50px;
        height:50px;
        margin:2px;
        float:left;
        border: 1px solid red;
        }
    </style>
    <script>
      function handleSelect(xId)
        {
        //
        // TESTPOINT
        alert("TESTPOINT\r>Grid: " + xId);
        //
        // GET BORDER COLOR
        // NOTE: An empty or blank value when you can see a border means the tag itself does not
        //            have 'border properties' (style="border: 2px{width} solid{style} green{color}").
        //            although there can be a border detailed via css local or external or via code (script).
        //            If the 'border properties' are returned then they were setup at the tag as
        //            above or the 'border properties' were updated by script code not css code.
        //            If the 'border properties' are NOT returned then they were setup via css.
        //            Thus, since everything seems to be heading toward edit on the fly (live) then css is NOT the way to go (learning).
        // HINT: Margin property is also not readable if set via css. Most likely all the properties values are the same way.
        //           Thus, setting the property values of a tag should be set at the tag control.
        // (works) cBorder=document.getElementById(xId).style.borderWidth;
        // (works) cBorder=document.getElementById(xId).style.borderStyle;
        // (works) cBorder=document.getElementById(xId).style.borderColor;
        // (works) cBorder=document.getElementById(xId).style.border;
        //cBorder=document.getElementById(xId).style.border;
        cBorder=document.getElementById(xId).style.margin;
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder);
        //
        // SELECT IMAGE
        document.getElementById(xId).style.margin="1px";
        document.getElementById(xId).style.border="2px solid gold";
        document.getElementById(xId).innerHTML=xId;
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder + "\r>[set border color gold]");
        //
        // GET BORDER COLOR
        //var cBorder=document.getElementById(xId).style.border-Color;  //Error
        //var cBorder=document.getElementById(xId).style.border-color;  //Error
        //var cBorder=document.getElementById(xId).style.borderColor;   //Error
        //var cBorder=document.getElementById(xId).style.bordercolor;   //Undefined
        cBorder=document.getElementById(xId).style.border;      //Empty
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder + "\r>[set border color gold]" + "\r>Border: " + cBorder);
        }
    </script>
  </head>

  <body>
    <div class="grid">
      <img style="border: 2px solid green" id="R0C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img style="border: 2px solid blue" id="R0C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img style="border: 2px solid purple" id="R0C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
    <div class="grid">
      <img id="R1C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R1C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R1C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
    <div class="grid">
      <img id="R2C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R2C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R2C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
  </body>
</html>
— Дон
источник
28
Для разработки я использую IE10 и блокнот. ?
— xanderiel 09
1

На мой взгляд, однозначного ответа нет.

An inline CSSбудет загружаться быстрее, если размер содержимого CSS загружается быстрее, чем ваш сервер будет реагировать наexternal CSS file запрос (с учетом времени DNS, задержки сервера и т. Д.).

Для CSS нормального размера я бы встроил их на страницу, для чего-то более 15-20 КБ я бы, вероятно, поместил его во внешний файл и убедился, что его можно кэшировать.

Я уверен, что есть много других соображений, которые мне сейчас не хватает, но нет фиксированного ответа для встроенного и внешнего.

— adrianTNT
источник
-1

Использование внешних таблиц стилей - определенно лучший вариант, потому что это поможет вам запомнить стиль, который вы применили к div (-ам). Это сокращает время загрузки страницы, потому что чем меньше HTML-код, тем быстрее он загружается.

Но в некоторых случаях вам может потребоваться изменить какое-либо свойство определенного div, тогда встроенный стиль - лучший вариант. И, честно говоря, один или два встроенных стиля не изменят время загрузки страницы.

Есть еще один вариант внутренней таблицы стилей, но он используется только тогда, когда у вас есть одностраничный веб-сайт, например, если вы делаете шаблон. Это потому, что вам нужно писать CSS на каждой HTML-странице.

— вики
источник
-3

Я предпочитаю использовать встроенный CSS, а не внешний CSS, где есть несколько небольших файлов CSS для каждого другого элемента или изображения. Нет смысла загружать несколько файлов CSS, содержащих всего 5-10 строк кода в каждом. Если ваш элемент содержит такие свойства, как hover, active, checked и т. Д., Вы должны использовать внешний файл CSS, так как это не усложняет процесс разработки.

— atuls1396
источник
Это крайне затрудняет обслуживание. Файлы CSS, JS по умолчанию должны кэшироваться в браузере вашего пользователя.
— dave2118
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.