Понять, что такое DOM на самом деле и чем он отличается от других

Объектная модель документа (DOM) — фундаментальная концепция веб-разработки, но это не единственный тип DOM, с которым должны быть знакомы разработчики.

Рост сложных веб-приложений привел к развитию двух дополнительных типов DOM: Virtual DOM и Shadow DOM.

Каждая из этих DOM имеет свои уникальные характеристики и варианты использования, и важно понимать различия между ними. Давай сделаем это! 👇

Что такое ДОМ?

DOM означает объектную модель документа. Это API, который позволяет нам получать доступ и управлять действительными документами HTML и XML.

В качестве примера используем следующий код:

<!DOCTYPE html>
<html>
  <head>
    <title>My page</title>
  </head>
  <body>
    <h1>Hey developers!</h1>
    <p>And more text</p>
  </body>
</html>

Хотя это очень похоже на наш код, DOM на него не совсем похож. Когда HTML-код недействителен, браузеры пытаются исправить это, создавая немного другой DOM. DOM также не совсем то, что мы видим в DevTools.

Примером являются псевдоэлементы, созданные с помощью CSS. Мы не можем получить к ним доступ с помощью JavaScript, потому что они не являются частью DOM.

Что такое теневой дом?

Shadow DOM — это браузерная технология, разработанная для того, чтобы мы могли создавать компоненты, которые имеют внешний вид и поведение, не влияя на другие элементы вокруг них, скрывая их структуру.

Очень простой пример: если вы работаете с HTML, вы наверняка видели тег video, верно? Я создал файл только с этим тегом. Но когда я говорю браузеру отображать Shadow DOM, посмотрите, что он показывает:

Это вся структура, скрытая внутри тега video. Обратите внимание, что есть несколько divs. Deixei selecionado no código um elemento, que é a barra de progresso do video. Посмотрите, что это сделано input из диапазона типов.

И есть еще несколько элементов, отвечающих за структуру и функционирование тега video.

И нам не нужно знать, из чего сделан элемент видеоплеера, как он работает или как он оформлен.

Shadow DOM позволяет нам создавать такие элементы, которые имеют инкапсулированную структуру, стиль и поведение. Таким образом, Javascript и CSS одного компонента не рискуют повлиять на другой компонент. Basicamente essa é a diferença com или DOM comum: encapsulamento.

Что такое виртуальный DOM?

Когда мы разрабатываем приложения с помощью HTML, именно через DOM мы можем манипулировать присутствующими в нем элементами. Однако каждый доступ к DOM занимает небольшое количество времени, и каждое изменение заставляет браузер повторно отображать затронутую часть экрана. Поэтому, если нам нужно обновить слишком много вещей, у нашего приложения будут проблемы с производительностью.

Вот тут-то и появляется виртуальный DOM (VDOM). Это представление DOM, хранящееся в памяти. Поэтому, когда нам нужно внести изменения, это делается в виртуальном DOM, что намного быстрее, чем DOM. Поэтому он анализирует все места, которые будут затронуты, и синхронизируется с DOM в процессе, называемом согласованием. Преимущество этого заключается в том, что этот анализ допускает минимально возможное количество обращений к DOM, что значительно повышает производительность приложений.

Помните, что виртуальный DOM — это не что-то из браузера, а концепция, реализованная такими библиотеками, как React.

Поскольку это делается в памяти, а не прикрепляется к DOM, созданному браузером, виртуальный DOM также позволяет нам создавать страницы на сервере. В настоящее время для некоторых приложений характерно рендерить начальный экран на сервере, чтобы отправить пользователю готовый HTML с данными, создавая впечатление, что все уже загружено, и только потом загружают остальную часть приложения.

Это можно сделать с помощью библиотек и фреймворков, таких как Angular, React и Vue.

Заключение

Если у вас есть какие-либо вопросы или вы хотите поделиться какими-либо советами, пожалуйста, оставьте комментарий ниже. Буду рад прочитать ваше мнение и отзывы!

Спасибо за прочтение! Следуйте за мной на этой платформе, чтобы узнать больше о программировании. Хорошего дня, скоро увидимся! 👋

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:

🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу