Использование Shadow DOM: скорость и приватность.

Добрый день, поясните плииз его возможности "на пальцах".

Для одного срочного/"горящего" проекта пишу на "чистом" JS сложные компоненты для отображения/редактирования данных. Сложные списки (с кучей дивов, картинок, инпутов в каждой строке), выпадающие списки (календари), сложные таблицы (с кучей вложений)... . И тут посоветовали почитать про Shadow DOM.

Сказали что
1) это ускорит отрисовку (режим "переключения" ДОМов между отлаживаемым и реальным)
2) это позволит "упаковать" компонент в "тень" + защитит их от наглого вмешивания парсерами.

Подскажите сколько в этом правды? "Да/нет" - не охота СЕЙЧАС тратить кучу часов на изучение/тестирование/переписывание компонент, чтобы потом узнать что это не так и есть куча ограничений не позволяющей писать что-нибудь достаточно сложное, или далеко не большинством браузеров поддерживается...

0

andyj, оба пункта не правда. Отрисовка будет медленнее, пусть немного. Парсер парсит результат - т.е. готовый DOM. Попрятать компонент - для пользователя сойдёти невидимым, а если из потока удалить, можно кучу проблем горести.

1

Сообщение от atanov оба пункта не правда.

А в чем тогда "профит" от технологии? Мне ее знакомый посоветовал который фронтом на фреймворках работает (Vui, Angular) - сказал что там все на этом построено в новых версиях и за счет этого дикий прирост скорости по сравнению с прошлыми версиями и разработка упрощается...

Застрял на изучении https://learn.javascript.ru/shadow-dom - красиво, компактно, "лишнее" скрыто в хроме "по умолчанию" (навело на мысль что новичок не будет знать как подступиться) но не понятно зачем...

0

Сообщение от andyj Мне ее знакомый посоветовал

Ваш знакомый не компетентен.
Все надстройки призваны облегчить и упростить процесс разработки для программиста. Цена этого - замедление работы, т.к. требуется код надстройки перевести в код для нативного приложения; скорости загрузки, т.к. требуется библиотеку лишнюю подгрузить и т.д. К счастью современные пользовательские устройства обладают впечатляющим быстродействием и внушительной памятью. И для коммерческой разработки требуется скорость создания продукта. Поэтому многие разработчики делают выбор в пользу удобства и скорости.
А проблема в том, что часто неучи, поверхностно изучив модный фреймворк, совершенно не понимают как работает нативный js. Результат очевиден.

3

atanov, andyj, а может проще почитать документацию по технологии? Ну, чтобы не фантазировать
Вот это

Сообщение от andyj это ускорит отрисовку (режим "переключения" ДОМов между отлаживаемым и реальным)

чушь.

Сообщение от andyj это позволит "упаковать" компонент в "тень" + защитит их от наглого вмешивания парсерами.

да, одна из возможностей предоставляемых этим апи.

Сообщение от atanov andyj, оба пункта не правда. Отрисовка будет медленнее, пусть немного. Парсер парсит результат - т.е. готовый DOM. Попрятать компонент - для пользователя сойдёти невидимым, а если из потока удалить, можно кучу проблем горести.

прям вся фраза чушь, без обид.
Отрисовка не станет медленнее, даже не используя это апи, убрать рендер в нирвану не составит труда - дерево over100500 элементов и дело в шляпе. То есть тупо куча текста. Именно этот критерий важен.
Парсер парсит документ - изучите как работают протоколы подключения.
Удалить из потока, проблемы - ЧТО?? Вы создаете класс компонента, создаете экземпляр, его рендерит клиент - Вы удаляете экземпляр, его не рендерит клиент. Вот если руки достались от представителей Brachyura - тогда да, возможны проблемы

Сообщение от andyj Мне ее знакомый посоветовал который фронтом на фреймворках работает (Vui, Angular) - сказал что там все на этом построено в новых версиях и за счет этого дикий прирост скорости по сравнению с прошлыми версиями и разработка упрощается

да, именно Custom Elements и Shadow DOM используются сегодня во всех современных фреймворках.
Развивается сама технология и естественно и они.

Сообщение от andyj Застрял на изучении https://learn.javascript.ru/shadow-dom

и не мудрено. У фантазера большие проблемы с чтением англ. техлиты.

Сообщение от andyj но не понятно зачем

Читайте документацию, маленький спойлер - основные возможности этих апи - ИНКАПСУЛЯЦИЯ дерева и создание собственных элементов, чей интерфейс будет отличен от пустого HTMLUnknownElement
https://www.w3.org/TR/shadow-dom/
https://w3c.github.io/webcomponents/spec/shadow/
https://github.com/w3c/webcomponents/
https://developer.mozilla.org/... shadow_DOM
https://developer.mozilla.org/... Components
er.mozilla.org/en-US/docs/Web/Web_Components[/url]

2

Спасибо за ссылки... почитаю...
Последний вопрос - насколько эта технология поддерживается современными браузерами? (про IE и MiniOpera молчу - похоже там почти все через ж...)

0

Сообщение от andyj насколько эта технология поддерживается современными браузерами?

https://caniuse.com - используйте ресурс
Ознакомьтесь - https://caniuse.com/#search=Shadow%20DOM, https://caniuse.com/#search=web%20component

1