Shadow DOM != Virtual DOM

Shadow DOM != Virtual DOM

От автора: DOM или Document Object Model (объектная модель документа) – знакомая всем концепция. Некоторым она нравятся, но у большей части она вызывает лишь головную боль. John Resig даже сказал как-то, что DOM это мусор.

Тема уже давно устарела, а множество вопросов, которые раньше волновали людей, ушли в прошлое, так как они были связаны не с DOM, а с набором инструментов для работы с ним (они реально усложняли нам жизнь).

На дворе 2017, и сегодняшние инструменты для получения доступа и манипулирования узлами DOM впечатляют (особенно если вы, как и я, начинали со времен, когда document.getElementById был пределом мечтаний).

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

Shadow DOM != Virtual DOM


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Virtual DOM

Virtual DOM – полное представление реального DOM. Его самой важной особенностью является группировка изменений и выполнение одиночного повторного рендеринга вместо множества мелких. Если коротко, то можно сказать, что Virtual DOM решает проблемы, связанные с производительностью (Не буду вдаваться в подробности принципа работы Virtual DOM. В рамках этой статьи достаточно знать, зачем он нужен.)

Shadow DOM

Shadow DOM != Virtual DOM

Shadow DOM, как настоящий интроверт, надежно защищает себя от влияния окружающих элементов и не заинтересован и не интересуется изменениями снаружи.

Спросите себя, какую главную UI-проблему решают фреймворки типа React и VueJS?

Инкапсуляция

CSS – сложная штука. Все становится еще сложнее, если вы соединяете стили, пытаясь повторно их использовать в различных комбинациях. Это неизбежно приводит к регрессивным ошибкам интерфейса, сложному обслуживанию и плохой масштабируемости. И все же, я считаю, что основная проблема это не CSS, а то, как мы его используем.

Shadow DOM – инструмент, помогающий обойти инкапсуляцию DOM на нативном уровне. Суть не просто в CSS, а в элементах.

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

Shadow DOM – это инкапсуляция.

Shadow DOM != Virtual DOM

Согласно MDN и w3, спецификация Shadow DOM находится в разработке. Поэтому поддержка в браузерах не очень хорошая… и, скорее всего, текущая реализация изменится. Однако основная концепция должна сохраниться.

Shadow DOM != Virtual DOM

Заключение

Надеюсь, теперь вы поняли, какую проблему пытается решить Shadow DOM, и чем он отличается от Virtual DOM.

В недалеком будущем нужно будет знать, как обрабатывать инкапсуляцию и компоненты на уровне браузера. Когда наступит этот день, множество кастомных функций в фреймворках станут не нужны. Почти всегда лучше использовать нативную реализацию, чем делать свою… «Поиграйтесь с Shadow DOM, всегда полезно изучить что-то новое.»

Источник: https://develoger.com/

Редакция: Команда webformyself.


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика верстки сайта под мобильные устройства

Изучите курс по созданию адаптивных сайтов

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree