diff --git a/docs/browser/01-about-browser.md b/docs/browser/01-about-browser.md index 096c70f..9c7b46b 100644 --- a/docs/browser/01-about-browser.md +++ b/docs/browser/01-about-browser.md @@ -3,5 +3,70 @@ sidebar_position: 1 --- # Браузер +Источник: DeepSeek + Как работает браузер? -Из каких модулей(интерфейс, домпарсер, js-движок, рендер, стораджи) состоит браузер \ No newline at end of file +Из каких модулей(интерфейс, домпарсер, js-движок, рендер, стораджи) состоит браузер + +1. **Пользовательский интерфейс (UI)** + - Это видимая часть браузера, с которой взаимодействует пользователь: адресная строка, кнопки "Назад" и "Вперед", меню, закладки и т.д. + - Интерфейс позволяет пользователю управлять браузером и взаимодействовать с веб-страницами. +2. Браузерный движок (Browser Engine) + - Связывает интерфейс и движок рендеринга. Он отвечает за управление процессами загрузки страниц, обработки HTML, CSS и JavaScript. + - Примеры: Blink (Chrome, Edge), Gecko (Firefox), WebKit (Safari). +3. **Движок рендеринга (Rendering Engine)** + - Отвечает за отображение содержимого веб-страницы на экране. + - Основные задачи: + - Парсинг HTML и CSS (разбор кода). + - Построение DOM (Document Object Model) и CSSOM (CSS Object Model). + - Создание дерева рендеринга (Render Tree). + - Компоновка (Layout) и отрисовка (Painting) элементов на экране. + - Примеры: Blink, WebKit, Gecko. +4. **JavaScript-движок (JS Engine)** + - Интерпретирует и выполняет JavaScript-код на странице. + - Современные движки используют JIT-компиляцию (Just-In-Time) для оптимизации выполнения кода. + - Примеры: + - V8 (Chrome, Edge, Opera). + - SpiderMonkey (Firefox). + - JavaScriptCore (Safari). +5. **Сетевой модуль (Networking)** + - Отвечает за выполнение сетевых запросов (HTTP, HTTPS, WebSocket и т.д.). + - Обрабатывает кеширование, куки, управляет соединениями и загрузкой ресурсов (HTML, CSS, JS, изображения, видео и т.д.). +6. **Хранилище данных (Storage)** + - Обеспечивает хранение данных на стороне клиента: + - **LocalStorage** и **SessionStorage** для хранения ключей и значений. + - **IndexedDB** для более сложных структур данных. + - **Cookies** для хранения небольших объемов данных, связанных с сессией или пользователем. + - Кеш браузера для временного хранения ресурсов (изображений, CSS, JS и т.д.). +7. **Модуль работы с DOM (Document Object Model)** + - Преобразует HTML-код в иерархическую структуру объектов (DOM-дерево), с которой может взаимодействовать JavaScript. + - DOM позволяет динамически изменять содержимое, структуру и стили страницы. +8. **Модуль работы с CSS (CSS Parser)** + - Анализирует CSS-код и преобразует его в CSSOM (CSS Object Model), который используется для стилизации элементов DOM. +9. **Модуль компоновки (Layout Engine)** + - Рассчитывает положение и размеры элементов на странице на основе DOM и CSSOM. + - Создает дерево рендеринга (Render Tree), которое используется для отрисовки. +10. **Модуль отрисовки (Painting)** + - Отвечает за отображение пикселей на экране на основе данных из дерева рендеринга. + - Использует графические библиотеки и API (например, OpenGL, DirectX) для рендеринга. +11. **Модуль безопасности (Security)** + - Обеспечивает защиту пользователя от вредоносных сайтов и атак. + - Контролирует политики безопасности, такие как CORS (Cross-Origin Resource Sharing), HTTPS, защита от XSS (Cross-Site Scripting) и CSRF (Cross-Site Request Forgery). +12. **Модуль управления вкладками и процессами** + - Современные браузеры используют многопроцессорную архитектуру, где каждая вкладка или расширение работает в отдельном процессе. + - Это повышает стабильность и безопасность браузера. +13. **Модуль расширений (Extensions)** + - Позволяет добавлять дополнительные функции в браузер через расширения и плагины. + - Примеры: блокировщики рекламы, менеджеры паролей, инструменты разработчика. +14. **Инструменты разработчика (DevTools)** + - Встроенные инструменты для отладки и анализа веб-страниц. + - Включают инспектор элементов, консоль JavaScript, сетевой анализатор, профилировщик производительности и т.д. + +Как это работает вместе: +1. Пользователь вводит URL в адресную строку. +2. Сетевой модуль загружает HTML, CSS, JavaScript и другие ресурсы. +3. Движок рендеринга парсит HTML и CSS, создает DOM и CSSOM. +4. JavaScript-движок выполняет JS-код, который может изменять DOM и CSSOM. +5. Движок рендеринга строит дерево рендеринга и рассчитывает компоновку. +6. Модуль отрисовки отображает пиксели на экране. +7. Пользователь видит страницу и взаимодействует с ней через интерфейс. \ No newline at end of file diff --git a/docs/browser/02-dom.md b/docs/browser/02-dom.md index 01b50f5..4557380 100644 --- a/docs/browser/02-dom.md +++ b/docs/browser/02-dom.md @@ -2,4 +2,65 @@ sidebar_position: 2 --- -# DOM \ No newline at end of file +# DOM +Источник: DeepSeek + +DOM (Document Object Model) — это программный интерфейс для работы с HTML и XML документами. Он представляет структуру документа в виде дерева объектов, где каждый узел соответствует элементу, атрибуту или тексту на странице. DOM позволяет программам (например, JavaScript) динамически изменять содержимое, структуру и стили веб-страницы. + +**Преимущества DOM:** +- Универсальность: работает с любыми HTML/XML документами. +- Гибкость: позволяет динамически изменять страницу. +- Поддержка всеми современными браузерами. + +**Недостатки DOM:** +- Медленная работа с большими документами (из-за сложности дерева). +- Высокое потребление памяти для сложных страниц. + +## Основные понятия DOM: +1. **Дерево узлов (Node Tree):** + - DOM представляет документ в виде иерархического дерева узлов. + - Каждый HTML-элемент, атрибут, текст и даже комментарий — это узел (Node) в этом дереве. +2. **Типы узлов:** + - **Элемент (Element):** HTML-теги (например, `