Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Virtual DOM ( ReactJS ) / 25 сообщений из 28, страница 1 из 2
  1  все
14.03.2016, 12:21
    #39191258
Ichisen
Ichisen
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Virtual DOM ( ReactJS )
Сейчас эта тема очень популярна. Очень интересно, как именно работает это виртуальное дерево.

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

Код: 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:42
    #39193973
бухалтер фантоцци
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Virtual DOM ( ReactJS )
Авторуже не используют 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, 04:32
    #39193978
бухалтер фантоцци
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Virtual DOM ( ReactJS )
Кстати про мой тест Гридов, которые сделаны через innerHTML в перемещаемых блоках (окнах).

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

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

Просьба рассмативать приведёные мной ссылки не как СЕО-спам, а по делу, буду рад замечаниям или указанием на возможные ошибки.
Так-же интересно взглянуть на аналогичный тест, но более оптимизированный по скорости работы.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.03.2016, 07:30
    #39194002
localvoid
localvoid
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Virtual DOM ( ReactJS )
бухалтер фантоцциАвторуже не используют 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, 16:07
    #39194594
бухалтер фантоцци
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Virtual DOM ( ReactJS )
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:21
    #39194614
бухалтер фантоцци
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Virtual DOM ( ReactJS )
Остаётся добавить, что очистка HTML-содержимого через innerHTML='' - происходит долго,
здесь наверное надо проверить немного другие способы, например через replaceChild ,
хотя я проверял этот метод при создании, никакого выигрыша не заметил,
видимо рендеринг вносит свои коррективы.

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


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