Один из моих друзей сказал, что использование <div style=""></div> вместо сжатого файла css, помещенного как link href в разделе head, дает некоторое повышение производительности. Это правда?
Внешняя разница в производительности по сравнению с встроенным стилем?
Ответ 1
Повышение производительности, о котором говорил ваш друг, вероятно, слишком тривиально по сравнению с увеличением производительности (с помощью других факторов) с использованием файла CSS.
Используя атрибут style, браузер только рисует правило для этого конкретного элемента, который в этом случае является элементом <div>. Это уменьшает время поиска для механизма CSS, чтобы определить, какие элементы соответствуют селектору CSS (например, a.hover или #someContainer li).
Однако ставить стиль на уровне элемента означает, что вы не можете кэшировать правила стиля CSS отдельно. Обычно стили стилей в файлах CSS позволяют выполнять кэширование, тем самым уменьшая количество загрузки с сервера при каждой загрузке страницы.
Приведение правил стиля на уровне элемента также заставит вас потерять информацию о том, какие элементы стилизованы каким образом. Это может также вызвать сбои в повышении производительности для рисования определенного элемента, в котором вы можете перекрасить несколько элементов вместе. Использование CSS файлов отделяет CSS от HTML и, таким образом, позволяет вам убедиться, что ваши стили правильны, и в дальнейшем легче их изменить.
Поэтому, если вы посмотрите на сравнение, вы увидите, что использование CSS файла имеет гораздо большую выгоду, чем стилизация на уровне элемента.
Не забывайте, когда у вас есть внешний файл стилей CSS, ваш браузер может кэшировать файл, что повышает эффективность вашего приложения!
Ответ 2
Ну, но это может быть причиной связанной или внешней таблицы стилей, поэтому ее можно кэшировать в браузере, особенно когда вы используете один и тот же div на нескольких страницах для сайта. Это означает, что браузеру приходится загружать таблицу стилей один раз вместо необходимости перезагружать код каждый раз, когда браузер перезагружает страницу. Это также делает более чистый код, который облегчает любые изменения или отладки.
Ответ 3
ПРАВДА "ДА"
Существует огромная разница. Особенно, когда вы автоматизируете пользовательский интерфейс. Попробуйте следующий код. Я использую 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>
Ответ 4
Страница будет загружаться быстрее, если вы используете встроенные стили и таблицы стилей. В некоторых случаях нужно быстрее.
При использовании таблицы стилей с использованием href требуется другой запрос на сервер, а затем анализ файла после ответа. С встроенными стилями нет ничего, просто прямое разбор.
Если у клиента медленный интернет, то этот единственный запрос может быть очень медленным, оставляя стиль страницы менее, пока таблица стилей не будет доставлена. Опять же, если бы он был встроен, то вообще не было бы задержки.
Единственная причина, по которой мы используем таблицы стилей, должна быть организована. Бывают случаи, когда они не нужны, поэтому достаточно встроенных стилей или таблиц стилей в документе.
Ответ 5
Нелегко ответить на вопрос, потому что производительность в этом случае зависит от многих факторов (сложность селекторов CSS, размер документа и т.д.). Однако, если мы возьмем изолированный случай, то мы увидим, что класс CSS в целом быстрее, чем встроенный стиль:
Встроенный стиль и класс CSS
Ответ 6
Использование внешних таблиц стилей определенно является лучшим вариантом, потому что это поможет вам запомнить стиль, который вы применили к div (ов). Это уменьшает время загрузки страницы, потому что чем меньше HTML-код, тем быстрее он будет загружаться.
Но в некоторых случаях вам, возможно, придется изменить какое-либо свойство конкретного div, тогда наиболее предпочтительным является встроенный стиль. И действительно, один или два встроенных стиля не будут изменять время загрузки страницы.
Существует еще одна опция внутренней таблицы стилей, но она используется только тогда, когда у вас есть сайт с одной страницей, например, если вы делаете шаблон. Это связано с тем, что вы должны писать CSS на каждой странице HTML
Ответ 7
Если вы пишете JS, рекомендуем использовать CSS в JS-решениях, чтобы поместить свои CSS-правила в JS-код, а не в DOM.style.
Этот lib рекомендуется: https://github.com/cssobj/cssobj
Создает правила CSS из JS и обновляется в реальном времени.