Понять, что такое 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 Coding
- 💰 БЕСПЛАТНЫЙ курс собеседования по программированию
- 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"
🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу