{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Парсинг HTML"},{"type":"text","text":" — это процесс, при котором браузер "},{"type":"text","marks":[{"type":"bold"}],"text":"читаeт HTML-код и превращает его в структуру данных"},{"type":"text","text":", понятную машине — в "},{"type":"text","marks":[{"type":"bold"}],"text":"DOM-дерево (Document Object Model)"},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Проще говоря, браузер "},{"type":"text","marks":[{"type":"bold"}],"text":"переводит текст HTML в визуальную структуру"},{"type":"text","text":", с которой потом может работать и он сам, и JavaScript."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 Шаг за шагом: что делает браузер при парсинге HTML"}]},{"type":"heading","attrs":{"textAlign":null,"level":4},"content":[{"type":"text","text":"1. "},{"type":"text","marks":[{"type":"bold"}],"text":"Загрузка файла"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Браузер получает HTML-документ (с сервера или локально) и начинает читать его "},{"type":"text","marks":[{"type":"bold"}],"text":"построчно, сверху вниз"},{"type":"text","text":"."},{"type":"hardBreak"},{"type":"text","text":"Он не ждёт, пока весь файл загрузится — парсинг и загрузка происходят "},{"type":"text","marks":[{"type":"bold"}],"text":"параллельно"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":4},"content":[{"type":"text","text":"2. "},{"type":"text","marks":[{"type":"bold"}],"text":"Лексический анализ (токенизация)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"HTML — это просто текст, и браузеру нужно понять, где "},{"type":"text","marks":[{"type":"bold"}],"text":"теги"},{"type":"text","text":", а где "},{"type":"text","marks":[{"type":"bold"}],"text":"содержимое"},{"type":"text","text":"."},{"type":"hardBreak"},{"type":"text","text":"Он разбивает текст на "},{"type":"text","marks":[{"type":"bold"}],"text":"токены"},{"type":"text","text":" — маленькие смысловые единицы:"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Например, код:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"

Привет, мир!

\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"распадается на токены:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"Тег открытия:

\nТекст: \"Привет, мир!\"\nТег закрытия:

\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":4},"content":[{"type":"text","text":"3. "},{"type":"text","marks":[{"type":"bold"}],"text":"Синтаксический анализ"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"После токенизации браузер проверяет структуру документа:"},{"type":"hardBreak"},{"type":"text","text":"вложенность, правильность закрытия тегов, соответствие стандартам."},{"type":"hardBreak"},{"type":"text","text":"Если находит ошибку (например, пропущен "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":"), он "},{"type":"text","marks":[{"type":"bold"}],"text":"пытается догадаться"},{"type":"text","text":", что имел в виду разработчик."},{"type":"hardBreak"},{"type":"text","text":"HTML — «терпимый» язык, поэтому страница почти всегда отобразится, даже если код неидеален."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":4},"content":[{"type":"text","text":"4. "},{"type":"text","marks":[{"type":"bold"}],"text":"Построение DOM-дерева"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Из полученных токенов браузер создаёт "},{"type":"text","marks":[{"type":"bold"}],"text":"DOM (Document Object Model)"},{"type":"text","text":" — внутреннее дерево элементов."},{"type":"hardBreak"},{"type":"text","text":"Каждый тег превращается в "},{"type":"text","marks":[{"type":"bold"}],"text":"узел (node)"},{"type":"text","text":", а вложенные элементы образуют "},{"type":"text","marks":[{"type":"bold"}],"text":"иерархию"},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пример:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n

Заголовок

Текст

\n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Преобразуется в дерево:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"body\n ├── h1\n │ └── \"Заголовок\"\n └── p\n └── \"Текст\"\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":4},"content":[{"type":"text","text":"5. "},{"type":"text","marks":[{"type":"bold"}],"text":"Обнаружение внешних ресурсов"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда браузер встречает теги вроде:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n\n

\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"он отправляет "},{"type":"text","marks":[{"type":"bold"}],"text":"дополнительные запросы"},{"type":"text","text":" к серверу, чтобы загрузить CSS, скрипты и изображения."},{"type":"hardBreak"},{"type":"text","text":"Некоторые из них (особенно "},{"type":"text","marks":[{"type":"code"}],"text":"

Что происходит при парсинге HTML браузером?

Комментарии