TL; DR: браузер анализирует файл HTML, создает модель DOM и сохраняет ее в памяти.
Мое сообщение в блоге на этой неделе посвящено объектной модели документа (DOM). Если вы не знакомы с этой концепцией, у Mozilla есть отличное объяснение здесь.
В Flatiron мы обсудили, что такое модель DOM, почему она важна и как получить к ней доступ. Однако мы не рассмотрели, где хранится модель DOM и как она туда попадает. Почему-то эта тема показалась мне особенно интересной на этой неделе. Это сообщение в блоге посвящено моему путешествию по этой теме.
В кроличью нору - window и document
Недавно я смотрел JavaScript: понимание странных частей Тони Алисии. Если вы перейдете к 29:00, он создаст и откроет в браузере пустой файл app.js. Файл app.js полностью пуст.
Открыв браузер, Тони запускает консоль разработчика Chrome и вводит слово window. Каким-то образом консоль вернула свойство window, содержащее сотни пар ключ / значение. Ввод document в консоли для пустого сайта аналогично дает какое-то предопределенное свойство.
Согласно MDN, «интерфейс window представляет собой окно, содержащее документ DOM; свойство document указывает на документ DOM, загруженный в это окно. '
Откуда загружено?
Как MDN объясняет выше, браузер «загружает» document в окно. Но где же DOM? Как document знает, где искать?
После некоторого поиска в Google я натолкнулся на этот ответ от React Kung Fu:
«Итак, хотя HTML - это текст, модель DOM - это представление этого текста в памяти».
Другими словами, браузер хранит DOM в оперативной памяти. Мой следующий вопрос был как?
Механизм рендеринга - как HTML преобразуется в модель DOM
Вот отрывок из сообщения на носителе, в котором рассказывается, как DOM загружается в память:
Механизм визуализации браузера получает содержимое запрошенного документа от сетевого уровня. Первым шагом механизма визуализации является анализ HTML-документа и преобразование проанализированных элементов в фактические узлы DOM в дереве DOM.
Этот процесс можно далее разбить на преобразование, разметку, лексирование и построение модели DOM. См. Эту статью от Google Web для получения дополнительной информации.
Последний эксперимент со средами выполнения JavaScript
Механизм JavaScript Google Chrome называется V8. В V8 также используется среда выполнения JavaScript под названием Node.js.
В отличие от Chrome, Node.js не запускается в браузере. Для меня не имело смысла иметь DOM без браузера, но я хотел подтвердить. Я запустил Node.js, введя node в свой терминал, а затем ввел document. Как я и ожидал, терминал вернул ReferenceError: document is not defined.
Надеюсь, вам понравилось читать этот пост!
