Как браузеры читают и интерпретируют CSS?

Вопрос с двумя частями:

У браузеров есть встроенный интерпретатор CSS, как для JavaScript?
Когда именно браузер читает CSS и когда он применяет CSS?

В частности, мне хотелось бы уточнить, как и почему JavaScript и CSS отличаются тем, что с JavaScript вам нужно специально подождать, пока window.onload, чтобы интерпретатор мог правильно getElementById. Тем не менее, в CSS вы можете выбирать и применять стили к классам и идентификаторы всех хитроумных игроков.

(Если это даже имеет значение, предположим, что я имею в виду базовую HTML-страницу с внешней таблицей стилей в голове)

Ответ 1

Если вы недавно работали с медленным подключением, вы обнаружите, что CSS будет применяться к элементам, поскольку они (медленно) появляются, фактически переполняют содержимое страницы по мере загрузки структуры DOM. Поскольку CSS не является языком программирования, он не полагается на объекты, доступные в данный момент времени для правильной обработки (JavaScript), и браузер может просто переоценить структуру страницы, поскольку она извлекает больше HTML по применение стилей к новым элементам.

Возможно, именно поэтому, даже сегодня узким местом Mobile Safari является не 3G-соединение во все времена, а именно рендеринг страницы.

Ответ 2

CSS-рендеринг - интересная тема, и всем конкурентам очень сложно ускорить рендеринг уровня представления (HTML и CSS), чтобы мгновенно достичь конечных пользователей конечными пользователями.

Во-первых, да, у разных браузеров есть свои собственные механизмы анализатора/рендеринга CSS

Chrome, Opera (из версии 15) - Использует Webkit fork, называемый Blink Двигатель рендеринга
Safari - использует Webkit (теперь переходим к Webkit2)
Internet Explorer - использует Trident Механизм рендеринга
Mozilla firefox - использует Gecko

Все эти механизмы визуализации содержат как интерпретатор CSS, так и HTML DOM parser.

Все эти двигатели следуют нижеприведенным моделям, это набор стандарт W3C

Примечание. Все эти модели взаимосвязаны и взаимозависимы. Они есть не отдельные модели, определяющие стандарты для предоставления CSS. Эти модели пролить свет на то, как CSS обрабатывается на основе приоритета, как встроенный стиль, Специфика и т.д.

Объяснение:

Этап 1:

Все браузеры загружают HTML и CSS script с сервера и начинают с разбора HTML-тегов на узлы DOM в дереве с именем дерева контента.

Пока HTML-документ, обработанный обработкой рендеринга браузера, создает другое дерево, называемое деревом Render. Это дерево имеет визуальные элементы в том порядке, в котором они будут отображаться.

Firefox называют его фреймами, где ребята Webkit называют их объектами Renderer или Renderer.

Смотрите изображение ниже: (Источник: камни HTML5)

Этап 2:

После вышеупомянутого процесса оба этих дерева проходят через Макет, что означает, что браузер указывает на окно просмотра, где каждый node должен быть помещен на экран.

Это определяется как схема позиционирования W3C (Следуйте этой ссылке для получения подробной информации), которая указывает браузеру на как и где должны быть размещены элементы. Ниже приведены 3 типа.

Нормальный поток
Поплавки
Абсолютная позиция

Этап 3:

Теперь последний этап называется Живопись. Это постепенный процесс, когда движок рендеринга проходит через каждый узел дерева рендеринга и визуально нарисовывает их с использованием внутреннего слоя пользовательского интерфейса. На этом этапе все visual Fx применяются как размер шрифта, цвет фона, рисование таблицы и т.д.

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

Блок-схема рабочего процесса для лучшего понимания

Источник Скалы HTML5

Webkit:

Mozilla Gecko:

Ссылки: (Пожалуйста, ознакомьтесь с приведенными ниже ссылками. Это лучшие ресурсы, доступные в Интернете, относящиеся к этой теме)

Ответ 3

Да, в браузерах встроен встроенный CSS-интерпретатор. Причина, по которой вы не дожидаетесь window.onload, заключается в том, что, хотя Javascript является обязательным языком программирования Turing, CSS - это просто набор правил стилизации, которые браузер применяется к совпадающим элементам, с которыми он сталкивается.

Ответ 4

Браузеры читают строки CSS справа налево. Это то, что говорят Google как Mozilla. Google говорит: "Двигатель оценивает каждое правило справа налево" на http://code.google.com/speed/page-speed/docs/rendering.html. Mozilla говорит: "Система стиля соответствует правилам, начиная с селектора клавиш, затем перемещаясь влево" на https://developer.mozilla.org/en/Writing_Efficient_CSS

Возьмем, к примеру, эту строку CSS: '.item h4'. Сначала браузер ищет все теги "h4" на странице, а затем смотрит, имеет ли тег h4 родительский элемент с именем "item" класса. Если он находит один, он применяет правило CSS.

Ответ 5

Недавно я столкнулся с этой статьей на скорости страницы google:

Когда браузер анализирует HTML, он создает внутреннее дерево документов, представляющее все элементы, которые будут отображаться. Затем он сопоставляет элементы со стилями, указанными в разных таблицах стилей, в соответствии со стандартными каскадами CSS, наследованием и правилами упорядочения. В реализации Mozilla (и, возможно, и других) для каждого элемента механизм CSS ищет по правилам стиля, чтобы найти совпадение. Двигатель оценивает каждое правило справа налево, начиная с самого правого селектора (называемого "ключом" ) и перемещаясь через каждый селектор, пока не найдет совпадение или не сбросит правило. ( "Селектор" - это элемент документа, к которому должно применяться правило.)

http://code.google.com/speed/page-speed/docs/rendering.html

Ответ 6

Это лучшее описание, которое я нашел о том, как браузер работает с HTML и CSS:

Механизм рендеринга начнет синтаксический анализ документа HTML и превратит теги в узлы DOM в дереве, называемом "деревом контента". Он будет анализировать данные стиля, как в внешних файлах CSS, так и в элементах стиля. Информация о стилизации вместе с визуальными инструкциями в HTML будет использоваться для создания другого дерева - дерева рендеринга.

В общем случае заданиями машинного перевода являются:

Обозначить правила (сломать ввод в токены AKA Lexer)
Построение дерева синтаксического анализа путем анализа структуры документа в соответствии с правилами синтаксиса языка

анализатор CSS

В отличие от HTML, CSS является контекстной свободной грамматикой (с детерминированной грамматикой).
Таким образом, у нас будет спецификация CSS, определяющая лексическую и синтаксическую грамматику CSS, что синтаксический анализатор применяется через таблицу стилей.

Лексическая грамматика (лексика) определяется регулярными выражениями для каждого токена:

comment     \/\*[^*]*\*+([^/*][^*]*\*+)*\/
num     [0-9]+|[0-9]*"."[0-9]+
nonascii    [\200-\377]
nmstart     [_a-z]|{nonascii}|{escape}
nmchar      [_a-z0-9-]|{nonascii}|{escape}
name        {nmchar}+
ident       {nmstart}{nmchar}*

"идентификатор" является коротким для идентификатора, как имя класса. "name" - это идентификатор элемента (который называется "#" )

Синтаксическая грамматика описана в BNF.

ruleset
  : selector [ ',' S* selector ]*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
selector
  : simple_selector [ combinator selector | S+ [ combinator selector ] ]
  ;
simple_selector
  : element_name [ HASH | class | attrib | pseudo ]*
  | [ HASH | class | attrib | pseudo ]+
  ;
class
  : '.' IDENT
  ;
element_name
  : IDENT | '*'
  ;
attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ] ']'
  ;
pseudo
  : ':' [ IDENT | FUNCTION S* [IDENT S*] ')' ]
  ;

Для подробного описания рабочего процесса браузера ознакомьтесь с этой статьей.

Ответ 7

Я считаю, что браузер интерпретирует CSS так, как он его находит, с тем, что CSS в теле (inline) имеет приоритет над CSS (внешний тоже) в голове