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

Question

Вопрос из двух частей:

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

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

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

Answer 1

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

Во-первых, да, у разных браузеров есть свой собственный синтаксический анализатор / движки рендеринга

• Chrome, Opera (от версии 15) - Использует Webkit Форк называется Мигает Рендеринг двигателя
• Safari - использует Webkit (теперь переходит на Webkit2)
• Internet Explorer - использует Trident Рендеринг движка
• Mozilla Firefox - использует геккона

Все эти движки рендеринга содержат как интерпретатор CSS, так и HTML DOM-парсер .

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

• Модель визуальной обработки
• Модель коробки
• Модель адресации CSS 2.1

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

---

Пояснение:

---

Этап 1:

---

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

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

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

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

---

Этап 2:

---

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

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

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

---

Этап 3:

---

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

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

---

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

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

• Webkit:

• Геккон Мозиллы:

---

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

• http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ (лучшее объяснение)
• http://www.slideshare.net/ariyahidayat/understanding-webkit-rendering
• https://html.spec.whatwg.org/multipage/syntax.html#parsing
• http://dbaron.org/talks/2008-11-12-faster-html-and-css/slide-3.xhtml
• https://css -tricks.com / альманах / свойства / т / текст-рендеринга /
• https://www.webkit.org/blog/114/webcore-rendering-i-the-basics/
• http://www.w3.org/TR/CSS21/intro.html#addressing

Answer 2

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

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

Answer 3

Браузеры читают строки 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.

Answer 4

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

Answer 5

Я недавно натолкнулся на эту статью на скорости страницы Google:

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

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

Answer 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}*

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

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

Answer 7

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