How It's Made: Browsers

Kristina Vasilevich

Браузеры

Содержание

  1. Браузер: начало
  2. Этапы отображения веб-страницы
  3. DOM, CSSOM, Render Tree
  4. Repaint и Reflow
  5. Printable to PDF

1. Браузер: Начало

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

Wikipedia
Scheme of browser

Разработчики работают с модулем отображения (Rendering Engine)

2. Этапы отображения веб-страницы

Scheme of browser rendering process

3. DOM, CSSOM, Render Tree

DOM - независящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML-, XHTML- и XML-документов, а также изменять содержимое, структуру и оформление таких документов.

Wikipedia

Схема построения DOM

DOM scheme

CSS Object Model представляет собой набор API-интерфейсов, позволяющих манипулировать CSS из JavaScript. Это очень похоже на DOM, но для CSS, а не HTML. Это позволяет пользователям динамически читать и изменять стиль CSS.

MDN

Схема построения CSSOM

CSSOM scheme

Render-Tree - древовидная структура, построенная путем объединения деревьев DOM и CSSOM.

Medium

Схема построения Render Tree

Render Tree scheme

Разница между DOM и Render Tree

Render Tree and DOM examples

Layout

Scheme of browser layout flow

Paint

Markup of component Visualisation of component

4. Repaint и Reflow

Repaint

Reflow

Источники

Спасибо!