Допустим, у нас есть HTML-страница с одной таблицей стилей <link>. Как браузер берет правила из этой таблицы стилей и применяет их к HTML? Я не спрашиваю о том, как сделать это быстрее, я хочу знать, как обрабатывается сам рендеринг.
Применяет ли он каждое правило одно за другим, анализируя таблицу стилей и постепенно отображая результат? Или содержимое файла CSS полностью загружается, затем полностью оценивается и затем одновременно применяется к HTML? Или что-то другое?
Я спрашиваю об этом после публикации ответа ранее на вопрос о порядке правил CSS, влияющем на скорость рендеринга, при условии, что стили рендерятся по мере загрузки таблицы стилей, поэтому первые правила будут применяться раньше последних, и не все сразу. Я не уверен, откуда я взял эту идею, просто я всегда думал об этом.
Я попробовал демо на своем сервере, которое выглядело так:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="test.css" />
</head>
<body></body>
</html>
test.css содержание:
html { background:green }
/* thousands of lines of irrelevant CSS to make the download slow */
html { background:red }
При тестировании в Firefox 5 я ожидал сначала увидеть зеленый цвет, а затем стать красным. Этого не произошло. Я пробовал использовать две отдельные таблицы стилей с конфликтующими правилами и получил одинаковые результаты. После многих комбинаций единственным способом, которым я заставил его работать, был встроенный блок <style> в <head>, с конфликтующими правилами, исходящими из <link> в <body> (само тело было полностью пустым, за исключением тега ссылки). Даже использование встроенного атрибута style в теге <html> и последующая загрузка этой таблицы стилей не привели к ожидаемому мерцанию.
Влияет ли CSS каким-либо образом на перерисовку, или окончательный результат применяется сразу после того, как вся таблица стилей загружена и ее правила вычислены для того, каким должен быть окончательный результат? Загружаются ли файлы CSS параллельно с самим HTML или блокируют его (как это делают теги сценария)? Как это работает на самом деле?
Я не ищу советов по оптимизации, я ищу авторитетные ссылки на эту тему, чтобы я мог цитировать их в будущем. Было очень сложно искать эту информацию, не обнаружив тонны не относящегося к делу материала. Резюме:
- Загружается ли весь контент CSS перед применением какого-либо? (ссылку пожалуйста)
- Как на это влияют такие вещи, как
@import, несколько<link>, встроенные атрибуты стиля,<style>блоки в голове и разные механизмы рендеринга? - Блокирует ли загрузка содержимого CSS загрузку самого HTML-документа?
