Один мой друг сказал, что использование <div style=""></div>вместо сжатого файла css, помещенного link hrefв заголовок, дает некоторый прирост производительности. Это правда?
css
performance
inline-styles
Джордж
источник
источник
Ответы:
Повышение производительности, упомянутое вашим другом, вероятно, слишком тривиально по сравнению с увеличением производительности (за счет других факторов) с использованием файла CSS.
Используя атрибут style, браузер рисует правило только для этого конкретного элемента, которым в данном случае является
<div>элемент. Это сокращает время поиска для механизма CSS, чтобы определить, какие элементы соответствуют селектору CSS (например,a.hoverили#someContainer li).Однако размещение стиля на уровне элемента будет означать, что вы не можете кэшировать правила стиля CSS отдельно. Обычно размещение стилей в файлах CSS позволяет выполнить кэширование, тем самым уменьшая нагрузку на сервер каждый раз, когда вы загружаете страницу.
Установка правил стиля на уровне элемента также заставит вас забыть о том, какие элементы стилизованы. Это также может иметь неприятные последствия при рисовании определенного элемента, когда вы можете перерисовывать несколько элементов вместе. Использование файлов CSS отделяет CSS от HTML и, таким образом, позволяет вам убедиться, что ваши стили верны и что их легче изменить позже.
Поэтому, если вы посмотрите на сравнение, вы увидите, что использование файла CSS дает гораздо больше преимуществ, чем стилизация на уровне элементов.
Не забывайте, что когда у вас есть внешний файл таблицы стилей CSS, ваш браузер может кэшировать файл, что увеличивает эффективность вашего приложения!
источник
Страница будет загружаться быстрее, если вы используете встроенные стили по сравнению с таблицами стилей. В некоторых случаях нужно быстрее.
Когда вы используете таблицу стилей с помощью href, требуется еще один запрос к серверу, а затем синтаксический анализ файла после ответа. Во встроенных стилях этого нет, только прямой синтаксический анализ.
Если у клиента медленный Интернет, то этот единственный запрос может быть очень медленным, оставляя страницу без стиля до тех пор, пока таблица стилей не будет доставлена. Опять же, если бы он был встроенным, задержки вообще не было бы.
Единственная причина, по которой мы используем таблицы стилей, - это организация. Бывают случаи, когда они не нужны, поэтому достаточно встроенных стилей или таблиц стилей в документе.
источник
Ответить на этот вопрос непросто, поскольку производительность в этом случае зависит от многих факторов (сложности селекторов CSS, размера документа и т. Д.). Однако, если мы возьмем единичный случай, то увидим, что класс CSS в целом быстрее, чем встроенный стиль:
встроенный стиль против класса CSS.
источник
Ну, это возможно, но причина использования связанной или внешней таблицы стилей в том, что ее можно кэшировать в браузере, особенно когда вы используете один и тот же div на нескольких страницах сайта. Это означает, что браузеру нужно загрузить таблицу стилей только один раз, вместо того, чтобы перезагружать код каждый раз, когда браузер перезагружает страницу. Это также делает код более чистым, что упрощает любые изменения или отладку.
источник
ИСТИНА - ДА
Это огромная разница. Особенно когда вы автоматизируете пользовательский интерфейс. Попробуйте следующий код. Для разработки я использую 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>источник
На мой взгляд, однозначного ответа нет.
An
inline CSSбудет загружаться быстрее, если размер содержимого CSS загружается быстрее, чем ваш сервер будет реагировать наexternal CSS fileзапрос (с учетом времени DNS, задержки сервера и т. Д.).Для CSS нормального размера я бы встроил их на страницу, для чего-то более 15-20 КБ я бы, вероятно, поместил его во внешний файл и убедился, что его можно кэшировать.
Я уверен, что есть много других соображений, которые мне сейчас не хватает, но нет фиксированного ответа для встроенного и внешнего.
источник
Использование внешних таблиц стилей - определенно лучший вариант, потому что это поможет вам запомнить стиль, который вы применили к div (-ам). Это сокращает время загрузки страницы, потому что чем меньше HTML-код, тем быстрее он загружается.
Но в некоторых случаях вам может потребоваться изменить какое-либо свойство определенного div, тогда встроенный стиль - лучший вариант. И, честно говоря, один или два встроенных стиля не изменят время загрузки страницы.
Есть еще один вариант внутренней таблицы стилей, но он используется только тогда, когда у вас есть одностраничный веб-сайт, например, если вы делаете шаблон. Это потому, что вам нужно писать CSS на каждой HTML-странице.
источник
Я предпочитаю использовать встроенный CSS, а не внешний CSS, где есть несколько небольших файлов CSS для каждого другого элемента или изображения. Нет смысла загружать несколько файлов CSS, содержащих всего 5-10 строк кода в каждом. Если ваш элемент содержит такие свойства, как hover, active, checked и т. Д., Вы должны использовать внешний файл CSS, так как это не усложняет процесс разработки.
источник