Скажем, у нас есть 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>
, а затем загрузка этой таблицы стилей не создала мерцание, которое я ожидал.
Являются ли repaints каким-либо образом затронуты CSS, или это конечный результат, который применяется сразу после загрузки всей таблицы стилей, и он вычисляет правила для конечного результата? Файлы CSS загружаются в паралоге с самим HTML или блокируют его (например, теги script)? Как это работает?
Я не ищу советы по оптимизации, я ищу авторитетные ссылки на эту тему, чтобы я мог привести их в будущем. Было очень сложно искать эту информацию, не внося тонны несвязанного материала. Краткое описание:
- Загружается ли весь контент CSS до того, как он будет применен? (обратитесь пожалуйста)
- Как это влияет на такие вещи, как
@import
, несколько<link>
s, встроенные атрибуты стиля,<style>
блоки в голове и разные механизмы рендеринга? - Загружает ли содержимое CSS-содержимого загрузку самого документа HTML?