redrockjs/frontend-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update browser section

Browse Source
This commit is contained in:
Valery Grunenko
2025-03-19 13:34:43 +03:00
parent d871b1c375
commit a7548d5e3b
2 changed files with 8 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/browser/01-about-browser.md
View File

@@ -5,13 +5,14 @@ sidebar_position: 1
# Браузер # Браузер
Источник: DeepSeek Источник: DeepSeek
Как работает браузер? Из каких модулей(интерфейс, домпарсер, js-движок, рендер, хранилища) состоит браузер?
Из каких модулей(интерфейс, домпарсер, js-движок, рендер, стораджи) состоит браузер
## Модули браузера
1. **Пользовательский интерфейс (UI)** 1. **Пользовательский интерфейс (UI)**
- Это видимая часть браузера, с которой взаимодействует пользователь: адресная строка, кнопки "Назад" и "Вперед", меню, закладки и т.д. - Это видимая часть браузера, с которой взаимодействует пользователь: адресная строка, кнопки "Назад" и "Вперед", меню, закладки и т.д.
- Интерфейс позволяет пользователю управлять браузером и взаимодействовать с веб-страницами. - Интерфейс позволяет пользователю управлять браузером и взаимодействовать с веб-страницами.
2. Браузерный движок (Browser Engine) 2. **Браузерный движок (Browser Engine)**
- Связывает интерфейс и движок рендеринга. Он отвечает за управление процессами загрузки страниц, обработки HTML, CSS и JavaScript. - Связывает интерфейс и движок рендеринга. Он отвечает за управление процессами загрузки страниц, обработки HTML, CSS и JavaScript.
- Примеры: Blink (Chrome, Edge), Gecko (Firefox), WebKit (Safari). - Примеры: Blink (Chrome, Edge), Gecko (Firefox), WebKit (Safari).
3. **Движок рендеринга (Rendering Engine)** 3. **Движок рендеринга (Rendering Engine)**
@@ -62,7 +63,7 @@ sidebar_position: 1
- Встроенные инструменты для отладки и анализа веб-страниц. - Встроенные инструменты для отладки и анализа веб-страниц.
- Включают инспектор элементов, консоль JavaScript, сетевой анализатор, профилировщик производительности и т.д. - Включают инспектор элементов, консоль JavaScript, сетевой анализатор, профилировщик производительности и т.д.
Как это работает вместе: ## Как это работает вместе:
1. Пользователь вводит URL в адресную строку. 1. Пользователь вводит URL в адресную строку.
2. Сетевой модуль загружает HTML, CSS, JavaScript и другие ресурсы. 2. Сетевой модуль загружает HTML, CSS, JavaScript и другие ресурсы.
3. Движок рендеринга парсит HTML и CSS, создает DOM и CSSOM. 3. Движок рендеринга парсит HTML и CSS, создает DOM и CSSOM.

6
docs/browser/02-dom.md
View File

@@ -5,7 +5,7 @@ sidebar_position: 2
# DOM # DOM
Источник: DeepSeek Источник: DeepSeek
DOM (Document Object Model) — это программный интерфейс для работы с HTML и XML документами. Он представляет структуру документа в виде дерева объектов, где каждый узел соответствует элементу, атрибуту или тексту на странице. DOM позволяет программам (например, JavaScript) динамически изменять содержимое, структуру и стили веб-страницы. **DOM (Document Object Model)** — это программный интерфейс для работы с HTML и XML документами. Он представляет структуру документа в виде дерева объектов, где каждый узел соответствует элементу, атрибуту или тексту на странице. DOM позволяет программам (например, JavaScript) динамически изменять содержимое, структуру и стили веб-страницы.
**Преимущества DOM:** **Преимущества DOM:**
- Универсальность: работает с любыми HTML/XML документами. - Универсальность: работает с любыми HTML/XML документами.
@@ -21,13 +21,13 @@ DOM (Document Object Model) — это программный интерфейс
- DOM представляет документ в виде иерархического дерева узлов. - DOM представляет документ в виде иерархического дерева узлов.
- Каждый HTML-элемент, атрибут, текст и даже комментарий — это узел (Node) в этом дереве. - Каждый HTML-элемент, атрибут, текст и даже комментарий — это узел (Node) в этом дереве.
2. **Типы узлов:** 2. **Типы узлов:**
- **Документ (Document):** Корневой узел, представляющий весь документ.
- **Элемент (Element):** HTML-теги (например, `<div>`, `<p>`, `<a>`). - **Элемент (Element):** HTML-теги (например, `<div>`, `<p>`, `<a>`).
- **Атрибут (Attribute):** Атрибуты элементов (например, `class`, `id`, `href`). - **Атрибут (Attribute):** Атрибуты элементов (например, `class`, `id`, `href`).
- **Текст (Text):** Текстовое содержимое внутри элементов. - **Текст (Text):** Текстовое содержимое внутри элементов.
- **Комментарий (Comment):** Комментарии в HTML-коде. - **Комментарий (Comment):** Комментарии в HTML-коде.
- **Документ (Document):** Корневой узел, представляющий весь документ.
3. **DOM-элементы:** 3. **DOM-элементы:**
- Каждый HTML-элемент представлен как объект с свойствами и методами. - Каждый HTML-элемент представлен как объект со свойствами и методами.
- Например, у элемента `<div>` есть свойства `className`, `id`, `innerHTML` и методы `appendChild()`, `remove()`. - Например, у элемента `<div>` есть свойства `className`, `id`, `innerHTML` и методы `appendChild()`, `remove()`.
## Как создается DOM: ## Как создается DOM: