ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Virtual DOM ( ReactJS )
25 сообщений из 28, страница 1 из 2
  1  все
Virtual DOM ( ReactJS )
    #39191258
Ichisen
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ichisen
Гость
Сейчас эта тема очень популярна. Очень интересно, как именно работает это виртуальное дерево.

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

или там всё намного хитрее?
...
Рейтинг: 0 / 0
14.03.2016, 12:21
| Ответить | Цитировать | Написать  
Virtual DOM ( ReactJS )
    #39191294
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
Ichisenприменяются в реальный дом через innerHTMLда
...
Рейтинг: 0 / 0
14.03.2016, 13:03
| Ответить | Цитировать | Написать  
Virtual DOM ( ReactJS )
    #39191335
Ichisen
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ichisen
Гость
Antonariy,

в чём тогда фишка этого фреймворка. типа вводится новый объект абстракции?
...
Рейтинг: 0 / 0
14.03.2016, 13:35
| Ответить | Цитировать | Написать  
Virtual DOM ( ReactJS )
    #39191381
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
типа того. тут про фишки: https://habrahabr.ru/post/249107/

я для тех же целей использую свой велосипед: 18547207
...
Рейтинг: 0 / 0
14.03.2016, 14:11
| Ответить | Цитировать | Написать  
Virtual DOM ( ReactJS )
    #39193367
localvoid
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
localvoid
Гость
Ichisenили там всё намного хитрее?

всё намного хитрее, тк апдэйт через innerHTML будет убивать внутреннее состояние элементов, и будет оч тормозно работать.
...
Рейтинг: 0 / 0
16.03.2016, 15:00
| Ответить | Цитировать | Написать  
Virtual DOM ( ReactJS )
    #39193493
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
localvoidIchisenили там всё намного хитрее?

всё намного хитрее, тк апдэйт через innerHTML будет убивать внутреннее состояние элементов, и будет оч тормозно работать.
Код: javascript
1.
obj.innerHTML += newHtml; // ну если так делать, то конечно это жесть


надо уметь правильно готовить, ситуации разные бывают.
...
Рейтинг: 0 / 0
16.03.2016, 16:23
| Ответить | Цитировать | Написать  
Virtual DOM ( ReactJS )
    #39193524
localvoid
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
localvoid
Гость
бухалтер фантоццинадо уметь правильно готовить, ситуации разные бывают.
в любой ситуации будет значительно медленнее во всех браузерах кроме старых IE.
...
Рейтинг: 0 / 0
16.03.2016, 16:48
| Ответить | Цитировать | Написать  
Virtual DOM ( ReactJS )
    #39193529
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
localvoidбухалтер фантоццинадо уметь правильно готовить, ситуации разные бывают.
в любой ситуации будет значительно медленнее во всех браузерах кроме старых IE.1. Почему?
2. Где можно посмотреть сравнительные тесты?
...
Рейтинг: 0 / 0
16.03.2016, 16:53
| Ответить | Цитировать | Написать  
Virtual DOM ( ReactJS )
    #39193562
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
localvoidIchisenили там всё намного хитрее?

всё намного хитрее, тк апдэйт через innerHTML будет убивать внутреннее состояние элементов, и будет оч тормозно работать.смотрел исходник, нашел манипуляции с innerHTML, манипуляций через DOM не нашел. впрочем, смотрел не особо внимательно.
...
Рейтинг: 0 / 0
16.03.2016, 17:10
| Ответить | Цитировать | Написать  
Virtual DOM ( ReactJS )
    #39193569
localvoid
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
localvoid
Гость
бухалтер фантоцци1. Почему?
2. Где можно посмотреть сравнительные тесты?
1. Потомучто будет происходить гораздо больше работы для того чтобы прийти почти к тому же результату (innerHTML убьёт внутренее состояние элементов).
2. Не знаю, можете написать какие-нибудь тесты. Например реализовать https://github.com/mathieuancelin/js-repaint-perfs с использованием innerHTML.
...
Рейтинг: 0 / 0
16.03.2016, 17:12
| Ответить | Цитировать | Написать  
Virtual DOM ( ReactJS )
    #39193573
localvoid
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
localvoid
Гость
Antonariyсмотрел исходник, нашел манипуляции с innerHTML, манипуляций через DOM не нашел. впрочем, смотрел не особо внимательно.
разработал одну из самых быстрых реализаций виртуального дома, отлично знаю исходники реакта :) Все апдэйты без какого-либо innerHTML, изначальный рендер в 0.15 так же будет без innerHTML.
...
Рейтинг: 0 / 0
16.03.2016, 17:16
| Ответить | Цитировать | Написать  
Virtual DOM ( ReactJS )
    #39193587
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
localvoid в любой ситуации будет значительно медленнее во всех браузерах кроме старых IE.
localvoidПотомучто будет происходить гораздо больше работы для того чтобы прийти почти к тому же результату ( innerHTML убьёт внутренее состояние элементов )
а если нужно заменить полностью все элементы или создать новые?
...
Рейтинг: 0 / 0
16.03.2016, 17:25
| Ответить | Цитировать | Написать  
Virtual DOM ( ReactJS )
    #39193602
localvoid
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
localvoid
Гость
бухалтер фантоцциа если нужно заменить полностью все элементы или создать новые?
в случае с innerHTML придётся ещё распарсить html со всеми проверками. Во времена тормозного взаимодействия с домом из жаваскрипта это было эффективно, это ещё называли батчингом, но сейчас все оптимизируют под андроид/хром, а не под старые ie, тк теперь это самая массовая и тормозная платформа, поэтому никакого innerHTML, тк во всех браузерах уже давно быстрое взаимодействие с домом.
...
Рейтинг: 0 / 0
16.03.2016, 17:33
| Ответить | Цитировать | Написать  
Virtual DOM ( ReactJS )
    #39193619
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
localvoid,

какие-то категоричные выводы, "все оптимизируют под андроид/хром",
я стараюсь оптимизировать под Chrome, FireFox, IE11, Opera12, формально ИЕ8 (чтобы в нём хотя-бы запускалось и открывалось).

Очень много тонких моментов, которые выявляются только тестами, причём очередное обновление версии браузера может значительно скорректировать результаты тестов.
...
Рейтинг: 0 / 0
16.03.2016, 17:41
| Ответить | Цитировать | Написать  
Virtual DOM ( ReactJS )
    #39193691
localvoid
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
localvoid
Гость
бухалтер фантоцци,

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

Вобщем тут тема про виртуальный дом, я отлично знаю как работают все библиотеки с реализацией виртуального дома, которые попадались мне на глаза и никто из них не использует для апдэйтов innerHTML, и те что раньше использовали для изначального рендера innerHTML сейчас переписывают этот кусок кода и выкидывают innerHTML. Никого переубеждать не собираюсь, видимо это просто случайность что все производительные решения не используют innerHTML :)
...
Рейтинг: 0 / 0
16.03.2016, 18:21
| Ответить | Цитировать | Написать  
Virtual DOM ( ReactJS )
    #39193704
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
localvoid,

Да я не спорю, но надо тестами проверять, уже научен, и то конкретно браузер и версию указывать желательно.
Сам и проверю кстати, потом отпишусь, может на этой, может на след.неделе, пока лень.

Недавно я тестировал большие перемещаемые Гриды (50 тыс.ячеек и более, в окошках), причём одновременную работу нескольких больших Гридов,
реализовывал через innerHTML - удобнее строку собирать, да и строковые операции давно оптимизированы,
стили для Грида отдельно пихал в новый тег style и т.д., обработчик один на весь Грид
под разные браузеры там оптимизация немного разная.
Но руки не дошли тогда проверить через DOM - и так время заняло немало, пока разные варианты тестил...
...
Рейтинг: 0 / 0
16.03.2016, 18:33
| Ответить | Цитировать | Написать  
Virtual DOM ( ReactJS )
    #39193716
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
localvoidбухалтер фантоцци,

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

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

История одной оптимизации , причем там работа исключительно с dom.
...
Рейтинг: 0 / 0
16.03.2016, 18:46
| Ответить | Цитировать | Написать  
Virtual DOM ( ReactJS )
    #39193728
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
кратко скажу, что большие перемещаемые блоки с Гридами подтормаживают во всех браузерах при следующих операциях:
- Блок завершает перемещение или изменение размеров
- Блок меняет видимость или прозрачность
- Блок меняет содержимое
Последнее (содержимое) как раз самое тормозное, но первые две операции над уже готовым Гридом почти такие-же тормозные.
Возможно, что через DOM обновление содержимого будет быстрее, проверю обязательно.
...
Рейтинг: 0 / 0
16.03.2016, 18:57
| Ответить | Цитировать | Написать  
Virtual DOM ( ReactJS )
    #39193735
localvoid
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
localvoid
Гость
Antonariyне все так однозначно (с)

История одной оптимизации , причем там работа исключительно с dom.

Ничего общего по этой ссылке с обсуждаемой темой.
...
Рейтинг: 0 / 0
16.03.2016, 19:03
| Ответить | Цитировать | Написать  
Virtual DOM ( ReactJS )
    #39193971
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
вообще-то.. чё там особо проверять-то...
это-ж быстро...
Вот простой пример

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
  body { text-align:left; }
  #out1,#out2 { width:200px; height:200px; overflow:scroll; }
  .test { float:left; text-align:center; width:15px; height:10px; border:solid 1px #000000; }
</style>
<script type="text/javascript">
function f_innerHTML() {
  var i, h='', dt = new Date();
  for(i=0;i<10000;i+=1){
	h+='<div class="test"></div>';
  }
  document.getElementById('out1').innerHTML = h;
  alert((new Date())-dt);
}
function f_DOM() {
  var i,d,p=document.getElementById('out2'), dt = new Date();
  for(i=0;i<10000;i+=1){
	d=document.createElement('div'); d.className='test'; p.appendChild(d);
  }
  alert((new Date())-dt);
}
function f_clear() {
  document.getElementById('out1').innerHTML = '';
  document.getElementById('out2').innerHTML = '';
}
</script>
</head>
<body>
  <input type="button" value="Clear" onclick="f_clear()" />
  <div style="float:left">
    <input type="button" value="innerHTML" onclick="f_innerHTML()" />
    <div id="out1"></div>
  </div>
  <div style="float:left">
    <input type="button" value="DOM" onclick="f_DOM()" />
    <div id="out2"></div>
  </div>
</body>
</html>



Результаты немного зависят от размеров родительских и дочерних элементов. а так-же от стилей.
Но общая картина такая:

FireFox 45.0 - скорость одинаковая, но задержки рендеринга (перед выводом сообщения проходит время).

IE11 - скорость innerHTML в 2.5 раза выше

Opera12 - скорость innerHTML в 1.5 раза выше

Chrome - скорость DOM выше в 1.5 - 4 раза, но это при повторных замерах,
а если обновить страницу, то при первом замере скорость примерно одинакова!

В Chrome через innerHTML тоже работает быстрее других браузеров.
...
Рейтинг: 0 / 0
17.03.2016, 03:32
| Ответить | Цитировать | Написать  
Virtual DOM ( ReactJS )
    #39193973
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
Авторуже не используют innerHTML в своих библиотеках.
значит можно предположить 3 варианта

1. тест выше не показывает реальной картины, но его можно подредактировать (стили поменять и т.д.) и перепроверить
2. массово идёт оптимизация под хром в ущерб остальным браузерам
3. innerHTML не используется в связи с недоступностью только что созданных элементов в момент создания

Склоняюсь к варианту 3, так как недостаток innerHTML - это доступ к только что созданным элементам DOM можно получить не сразу, а например так:
Код: javascript
1.
2.
3.
4.
5.
obj.innerHTML = '<div id="myId"></div>';
setTimeout(function(){
   var id=document.getElementById('myId');
   ... 
}, 0);
...
Рейтинг: 0 / 0
17.03.2016, 03:42
| Ответить | Цитировать | Написать  
Virtual DOM ( ReactJS )
    #39193978
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
Кстати про мой тест Гридов, которые сделаны через innerHTML в перемещаемых блоках (окнах).

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

Тест гридов - подробное описание там-же или на отдельной странице Тестирование больших гридов

Просьба рассмативать приведёные мной ссылки не как СЕО-спам, а по делу, буду рад замечаниям или указанием на возможные ошибки.
Так-же интересно взглянуть на аналогичный тест, но более оптимизированный по скорости работы.
...
Рейтинг: 0 / 0
17.03.2016, 04:32
| Ответить | Цитировать | Написать  
Virtual DOM ( ReactJS )
    #39194002
localvoid
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
localvoid
Гость
бухалтер фантоцциАвторуже не используют innerHTML в своих библиотеках.
значит можно предположить 3 варианта

1. тест выше не показывает реальной картины, но его можно подредактировать (стили поменять и т.д.) и перепроверить
2. массово идёт оптимизация под хром в ущерб остальным браузерам
3. innerHTML не используется в связи с недоступностью только что созданных элементов в момент создания

Склоняюсь к варианту 3, так как недостаток innerHTML - это доступ к только что созданным элементам DOM можно получить не сразу, а например так:
Код: javascript
1.
2.
3.
4.
5.
obj.innerHTML = '<div id="myId"></div>';
setTimeout(function(){
   var id=document.getElementById('myId');
   ... 
}, 0);


1. если приложение работает примерно так как работает этот тест, то наверно показывает :) Просто обычно конечные приложения, в которых требуется высокая производительность выглядят совсем иначе.
2. массово идёт оптимизация под мобильные платформы, тк они работают значительно медленее, особенно андроид девайсы.
3. дом апи синхронный
...
Рейтинг: 0 / 0
17.03.2016, 07:30
| Ответить | Цитировать | Написать  
Virtual DOM ( ReactJS )
    #39194594
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
localvoid,

Проверил на планшете ASUS Fonepad ME371MG 16Gb , а так-же на SmartTV LG

Вот тест для мобильных - создаётся 3000 вложенных DIV-элементов. Тест на мобильных innerHTML vs DOM

Отображение (рендеринг) браузером вложенных объектов, созданных через .innerHTML, работает быстрее созданных через DOM,
причём с возрастанием количества вложенных объектов, разница растёт и достигает 10 и более раз!
Хотя замеренное время быстрее у DOM-операций!

Получается, что измерение таймингов скорости innerHTML vs DOM вообще ни о чём по сравнению со скоростью рендеринга,
и в реальности браузеры рендерят намного быстрее как раз при использовании innerHTML.

localvoidесли приложение работает примерно так как работает этот тест, то наверно показывает :) Просто обычно конечные приложения, в которых требуется высокая производительность выглядят совсем иначе .
Как-бы они не выглядели, каим образом они заставляют браузер рендерить быстрее, используя DOM-операции?

localvoidв любой ситуации будет значительно медленнее во всех браузерах кроме старых IE.
Мне кажется, что Вы вводите нас в заблуждение.

Итого: остаюсь при своём мнении, что, как Вы утверждали выше, "все библиотеки с реализацией виртуального дома",
не используют innerHTML по причине недоступности только что созданных элементов в момент создания.
...
Рейтинг: 0 / 0
17.03.2016, 16:07
| Ответить | Цитировать | Написать  
Virtual DOM ( ReactJS )
    #39194614
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
Остаётся добавить, что очистка HTML-содержимого через innerHTML='' - происходит долго,
здесь наверное надо проверить немного другие способы, например через replaceChild ,
хотя я проверял этот метод при создании, никакого выигрыша не заметил,
видимо рендеринг вносит свои коррективы.

Поэтому уверен, что innerHTML позволяет каждому браузеру задействовать свои внутренние алгоритмы оптимизации наилучшим образом.
...
Рейтинг: 0 / 0
17.03.2016, 16:21
| Ответить | Цитировать | Написать  
25 сообщений из 28, страница 1 из 2
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Virtual DOM ( ReactJS )
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]