Виртуальный DOM скорость изменений

@Supersumestria · Регистрация: 20.12.2009

Студворк — интернет-сервис помощи студентам

Не фронтендер, не слежу за новинками, так получилось что вчера довелось почитать про react.js там было написано:

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

React используется виртуальный DOM. Поэтому он быстрый.

Значит библиотеки и фреймворки работающие с настоящим DOM - медленные.

и чере 5 минут читаю:

В отличие от многих других фреймворков, Svelte не требует дополнительных вычислений во время выполнения и обновления Virtual DOM, как это видно в React.js.

Svelte быстрее React потому что не использует Virtual DOM.

Хотелось бы опиратся на аподиктические утверждения или аксиомы.

krvsa · 05.08.2024, 16:33

Supersumestria, я бы вообще на этот счет не переживал...

Поскольку любой продукт будет выпячивать свои достоинства и особенно "трамбовать ущербность" всего другого.

@voraa · 07.08.2024, 08:58

Я так и не понимаю, в чем преимущество виртуального DOM?
Если не брать говнокодеров, который меняет в реальном DOM все подряд с помощью innerHTML.
Меняй в реальном DOM только то, что надо менять, и все будет работать быстро.

krvsa · 07.08.2024, 09:11

Сообщение от voraa

Меняй в реальном DOM только то, что надо менять

Так вот для "выявления" оного и используется виртуальный дом. Насколько я понимаю, именно на нем и выполняется сравнение, дабы понять, что в итоге менять в реальном ДОМ.

Я на все это смотрю так - есть некий инструмент. Нам рассказали как им управлять... Дали точки входа... Мы пользуемся.
Что он там делает "внутри" - это уже не моя проблема.

Не нравится такой инструмент - возьми другой. Или мастырь сам что-то.

@voraa · 07.08.2024, 10:29

Сообщение от krvsa

Так вот для "выявления" оного и используется виртуальный дом. Насколько я понимаю, именно на нем и выполняется сравнение, дабы понять, что в итоге менять в реальном ДОМ.

Это проблема инструмента, а не ДОМа.
Лишнее сравнение приводит к замедлению, по сравнению с тем, что можно просто изменить только то, что надо.

krvsa · 07.08.2024, 11:10

Сообщение от voraa

можно просто изменить только то, что надо

Как узнать, что именно "надо"?

@voraa · 07.08.2024, 11:24

Сообщение от krvsa

Как узнать, что именно "надо"?

Это как то естественно, когда программируешь, знать, что надо поменять.
Если надо изменить (добавить, удалить) класс элемента, то делаешь именно это, а не переписываешь весь элемент с новыми значениями классов.
Если надо добавить элемент в список, то просто создаешь элемент и добавляешь, а не переписываешь весь список с элементами в расчете на то, что потом как то сравнится, что было и что должно быть, а потом будут внесены только нужные изменения.

krvsa · 07.08.2024, 11:53

Сообщение от voraa

Если надо изменить (добавить, удалить) класс элемента, то делаешь именно это

Так Реакт не так работает... Когда просто меняют стейт или присылают новые пропсы - как узнать на что или на кого это повлияло?

Добавлено через 7 минут
Может кому будет интересно...
В видосе паренек пытается объяснить про виртуальный ДОМ. Если отбросить прилагательные, восхваляющие эту виртуальность, довольно подробно показывается как "теоретически" все работает в Реакт.

@voraa · 07.08.2024, 11:58

Сообщение от krvsa

Так Реакт не так работает...

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

Писать может и проще, но приложение получается тяжеловесней и тормознутей.

krvsa · 07.08.2024, 12:06

Сообщение от voraa

Поэтому и не надо говорить про эффективность виртуального дом.

Когда говорят про "эффективность" нужно указывать "относительно чего" эта "эффективность" измерялась.

Если измерять относительно "олдскульного" преобразования ДОМ, что делали ранее - разумеется Реакт не может быть эффективнее.

Другое дело когда ты сделал нечто... Отрекламировал его и убедил многих это использовать. Потом получил массу проблем при использовании.
Но!
Потом придумал "виртуальный ДОМ"!
И это-то стало эффективнее работать по сравнении с тем, что было ранее.

Тут все четко.

Или взять некоего конкурента, который сделал свое нечто, довольно хорошо похожее на твое... Но твой "виртуальный дом" гораздо эффективнее подхода конкурента.
Тут опять все четко.

@DrType · 07.08.2024, 13:50

Сообщение от krvsa

Когда говорят про "эффективность" нужно указывать "относительно чего" эта "эффективность" измерялась.

Перекликается с

But hang on a minute! The virtual DOM operations are in addition to the eventual operations on the real DOM. The only way it could be faster is if we were comparing it to a less efficient framework (there were plenty to go around back in 2013!), or arguing against a straw man — that the alternative is to do something no-one actually does

- https://svelte.dev/blog/virtua... e-overhead

Новые блоги и статьи Все статьи Все блоги /
Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .

krvsa 3818 / 1656 / 428 Регистрация: 14.03.2022 Сообщений: 4,132
	05.08.2024, 16:33
	Supersumestria, я бы вообще на этот счет не переживал... Поскольку любой продукт будет выпячивать свои достоинства и особенно "трамбовать ущербность" всего другого. 0

@voraa 1244 / 1145 / 178 Регистрация: 21.01.2024 Сообщений: 5,278
	07.08.2024, 08:58
	Я так и не понимаю, в чем преимущество виртуального DOM? Если не брать говнокодеров, который меняет в реальном DOM все подряд с помощью innerHTML. Меняй в реальном DOM только то, что надо менять, и все будет работать быстро. 0