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

Question

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

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

519 6

css performance inline-styles

6 ответов:

Comments

Ничего не найдено.

mauris · Accepted Answer · 2012-12-05 14:03:38

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

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

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

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

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

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

eciusr · Accepted Answer · 2016-07-19 16:43:42

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

sebjwallace · Accepted Answer · 2016-04-12 18:47:50

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

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

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

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

Don · Accepted Answer · 2013-08-21 01:18:47

ПРАВДА-ЭТО "ДА"

есть огромная разница. Особенно при автоматизации пользовательского интерфейса. Попробуйте следующий код. Я использую 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>

s.ermakovich · Accepted Answer · 2013-09-30 15:12:08

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

vicky · Accepted Answer · 2013-10-24 15:59:41

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

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

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