Sobes.tech
Back to questions
Middle+
123
questionbank

Как браузер парсит HTML-файл?

Answer from AI

sobes.tech AI

Браузер читает HTML файл байт за байтом. На основе кодировки файла строится поток символов. Этот поток парсится, формируя токены (открывающий и закрывающий тег, текст, комментарий, doctype). Токены преобразуются в узлы (nodes), которые связываются в дерево — Document Object Model (DOM).

Процесс парсинга проходит следующие этапы:

  1. Чтение байтов: Браузер получает поток байтов.
  2. Определение кодировки: Определяется кодировка файла (например, UTF-8, Windows-1251). Это может происходить через HTTP-заголовки, <meta> теги или определяться автоматически.
  3. Преобразование в символы: Байты преобразуются в символы в соответствии с определенной кодировкой.
  4. Токенизация: Поток символов разбивается на токены.
    <!-- Пример токенов -->
<p> // Токен: открывающий тег "p"
  Привет, // Токен: текст "Привет, "
  мир! // Токен: текст "мир!"
</p> // Токен: закрывающий тег "p"
  5. Построение AST (DOM Tree): На основе последовательности токенов строится дерево узлов (DOM). Браузер поддерживает стек открытых тегов; когда встречает закрывающий тег, он закрывает соответствующий открывающий тег из стека и добавляет его узел в дерево.
    <!-- Простая структура DOM для: -->
<!DOCTYPE html>
<html>
  <head>
    <title>Пример</title>
  </head>
  <body>
    <p>Текст</p>
  </body>
</html>

// DOM дерево будет иметь структуру, отражающую вложенность тегов.
// Например, узел "p" будет потомком узла "body".
  6. Парсинг скриптов и стилей: Во время парсинга HTML, браузер встречает теги <script> и <link>/<style>.
    • <script>: По умолчанию парсинга HTML приостанавливается, скрипт загружается, парсится и выполняется. После выполнения парсинг HTML возобновляется. Атрибуты async и defer меняют это поведение. async выполняет скрипт асинхронно, не блокируя парсинг. defer откладывает выполнение скрипта до завершения парсинга HTML.
    • <link> / <style>: CSS парсится параллельно с HTML и создает CSS Object Model (CSSOM). Наличие <link> до <script> может задерживать выполнение скрипта, так как браузер может ждать построения CSSOM, чтобы обеспечить корректное применение стилей до выполнения скрипта.
PreviousNext