Как загружаются внешние таблицы стилей перед HTML?

Если у меня есть внешние таблицы стилей, включенные в раздел <head></head> моей HTML-страницы, они будут загружены перед HTML и сразу же будут применены к рендерингу? Позвольте мне представить конкретный пример использования.

Внешний файл styles.css:

form label {
    display: none;
}

Страница, содержащая форму:

<head>
    <link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<form action="process.php" method="post">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" />
</form>

Могу ли я быть уверенным, что метки будут невидимы при загрузке страницы (без мерцания из-за загрузки CSS)?

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

Ответ 1

Если вы включите CSS в раздел главы, вы можете быть уверены, что ярлык не будет отображаться.

HTML загружается первым. Браузер начинает считывать html сверху и начинает извлекать все файлы CSS и JavaScript, упомянутые в разделе HEAD. Страница не будет нарисована (показывается), пока все файлы CSS и JavaScript в HEAD не будут загружены и не оценены.

Ответ 2

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

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

Ответ 3

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

Таким образом, в случае вызова таблицы стилей он будет вызываться, когда он читается непосредственно относительно того, где вы его написали (обычно в)

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

Ответ 4

Я считаю, что самый простой ответ на ваш вопрос: "Да... сначала загружаются таблицы стилей". Вот почему вы ссылаетесь на них в голову. Как предложено выше, вы можете делать фанки, чтобы настроить порядок, в котором браузер отвечает и отображает какие-либо инструкции в вашем html файле, но функция браузера по умолчанию состоит в том, чтобы по существу попытаться адресовать каждую строку разметки в том порядке, в котором она Представлен. Следовательно, это также то, почему лучше всего разместить скрипты отслеживания и т.д. Внизу страницы... ниже нижнего колонтитула, но над тегом тела. (Делайте так, чтобы ваша страница отображалась, прежде чем иметь дело с функциями, которые в противном случае не видны пользователю.) Если вы думаете о браузере, как художник или рисовальщик, вы поручаете что-то рисовать, вы должны сказать художнику, как/что рисовать, прежде чем положить перо к бумаге. Аналогично, сообщая обозревателю, где взять ваши инструкции re. стилизация по ссылке в голове позволяет "знать", что и как "рисовать", прежде чем она начнет "рисовать".