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

17

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

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

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

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

    
задан Moses 20.08.2010 в 04:39
источник

7 ответов

8

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

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

    
ответ дан Aaron 20.08.2010 в 05:13
источник
15

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

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

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

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

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

  

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

Объяснение:

Этап 1:

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

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

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

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

Этап 2:

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

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

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

Этап 3:

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

  

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

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

Источник камни HTML5

  • Webkit:

  • Gecko Mozilla:

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

ответ дан Nirus 19.08.2015 в 15:59
источник
6

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

    
ответ дан Chuck 20.08.2010 в 05:15
источник
5

Браузеры читают строки CSS справа налево. Вот что говорит Google как Mozilla. Google говорит: «Двигатель оценивает каждое правило справа налево» на странице Ссылка . Mozilla говорит: «Система стиля соответствует правилам, начиная с селектора ключей, а затем перемещаясь влево» на Ссылка

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

    
ответ дан stefannh 05.01.2012 в 13:19
источник
4

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

  

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

Ссылка

    
ответ дан joggink 20.08.2010 в 09:39
источник
2

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

  

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

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

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

анализатор CSS

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

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

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

«ident» для идентификатора является коротким, как имя класса. «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*] ')' ]
  ;

Подробное описание рабочего процесса браузера можно найти в статье .

    
ответ дан maioman 30.04.2015 в 10:50
источник
1

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

    
ответ дан Rhys 20.08.2010 в 05:12
источник