From 1445c4f31f37f282c1c8afc4b835f479863687b4 Mon Sep 17 00:00:00 2001 From: RedrockJS Date: Thu, 6 Mar 2025 14:23:36 +0300 Subject: [PATCH] update git --- docs/browser/01-about-browser.md | 67 ++++++++++++++++- docs/browser/02-dom.md | 63 +++++++++++++++- docs/browser/03-cssom.md | 95 +++++++++++++++++++++++- docs/browser/04-critical-render-path.md | 69 ++++++++++++++++- docs/browser/05-dev-tools.md | 99 ++++++++++++++++++++++++- docs/git/01-git.md | 24 +++++- docs/git/02-ci-cd.md | 52 ++++++++++++- 7 files changed, 462 insertions(+), 7 deletions(-) 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-теги (например, `
`, `

`, ``). + - **Атрибут (Attribute):** Атрибуты элементов (например, `class`, `id`, `href`). + - **Текст (Text):** Текстовое содержимое внутри элементов. + - **Комментарий (Comment):** Комментарии в HTML-коде. + - **Документ (Document):** Корневой узел, представляющий весь документ. +3. **DOM-элементы:** + - Каждый HTML-элемент представлен как объект с свойствами и методами. + - Например, у элемента `

` есть свойства `className`, `id`, `innerHTML` и методы `appendChild()`, `remove()`. + +## Как создается DOM: +1. Браузер загружает HTML-документ. +2. Парсер HTML разбирает код и создает дерево DOM. +3. Каждый элемент, атрибут и текст становятся узлами в этом дереве. +4. DOM становится доступным для JavaScript и других скриптов. + +## Зачем нужен DOM? +1. **Динамическое изменение страницы:** + - JavaScript может использовать DOM для добавления, удаления или изменения элементов на странице. + - Пример: изменение текста, добавление новых элементов, изменение стилей. +2. **Взаимодействие с пользователем:** + - DOM позволяет реагировать на действия пользователя (клики, ввод текста и т.д.). + - Пример: обработка событий (click, mouseover, keydown). +3. **Доступ к данным:** + - DOM предоставляет методы для поиска и извлечения данных из документа. + - Пример: поиск элементов по классу, тегу или идентификатору. + +## Основные методы работы с DOM: +1. Поиск элементов: + - `document.getElementById('id')` — поиск по идентификатору. + - `document.querySelector('.class')` — поиск по CSS-селектору. + - `document.getElementsByTagName('div')` — поиск по тегу. +2. Изменение содержимого: + - `element.innerHTML = 'Новый текст'` — изменение HTML-содержимого. + - `element.textContent = 'Текст'` — изменение текстового содержимого. +3. Изменение стилей: + - `element.style.color = 'red'` — изменение стиля элемента. +4. Добавление и удаление элементов: + - `document.createElement('div')` — создание нового элемента. + - `parentElement.appendChild(newElement)` — добавление элемента в DOM. + - `element.remove()` — удаление элемента. +5. Работа с атрибутами: + - `element.getAttribute('href')` — получение значения атрибута. + - `element.setAttribute('class', 'new-class')` — установка атрибута. \ No newline at end of file diff --git a/docs/browser/03-cssom.md b/docs/browser/03-cssom.md index e0b79d6..6f45a08 100644 --- a/docs/browser/03-cssom.md +++ b/docs/browser/03-cssom.md @@ -2,4 +2,97 @@ sidebar_position: 3 --- -# CSSOM \ No newline at end of file +# CSSOM +Источник: DeepSeek + +CSSOM (CSS Object Model) — это программное представление CSS-стилей в виде иерархической структуры объектов, аналогично +тому, как DOM (Document Object Model) представляет HTML-документ. CSSOM позволяет JavaScript и другим программам +динамически читать и изменять стили элементов на веб-странице. + +## Зачем нужен CSSOM? + +1. **Представление стилей:** + - CSSOM преобразует CSS-код в структуру, которую можно программно обрабатывать. + - Это позволяет браузеру понимать, как стили применяются к элементам. +2. **Динамическое изменение стилей:** + - JavaScript может использовать CSSOM для изменения стилей элементов на лету. + - Пример: изменение цвета, размера, положения элементов в ответ на действия пользователя. +3. **Оптимизация рендеринга:** + - CSSOM используется движком рендеринга браузера для построения дерева рендеринга (Render Tree), которое объединяет + DOM и CSSOM для отображения страницы. + +## Как создается CSSOM? + +1. Браузер загружает CSS-файлы или встроенные стили (`