powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Virtual DOM ( ReactJS )
3 сообщений из 28, страница 2 из 2
Virtual DOM ( ReactJS )
    #39194690
localvoid
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
бухалтер фантоцци,

https://gist.github.com/localvoid/5e2b74879cab11b15a10

На кэйсе, который вы тестируете, наиболее продвинутые реализации с виртуальным домом будут работать так как в моей реализации. И на моём Nexus'е innerHTML значительно проигрывает в скорости.

В реальном же приложении при использовании innerHTML нужны будут дополнительные проверки для защиты от xss итп, а в случае с виртуальным домом добавляются ещё более продвинутые техники для оптимизации, вроде recycling'а дом нодов итд.
...
Рейтинг: 0 / 0
Virtual DOM ( ReactJS )
    #39194788
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
localvoidбухалтер фантоцци,

https://gist.github.com/localvoid/5e2b74879cab11b15a10

На кэйсе, который вы тестируете, наиболее продвинутые реализации с виртуальным домом будут работать так как в моей реализации. И на моём Nexus'е innerHTML значительно проигрывает в скорости.

В реальном же приложении при использовании innerHTML нужны будут дополнительные проверки для защиты от xss итп, а в случае с виртуальным домом добавляются ещё более продвинутые техники для оптимизации, вроде recycling'а дом нодов итд.
А теперь подкорректируем Ваш тест на более реальный

1. неплохо было-бы ещё очищать родительский элемент, для этого я добавил кнопку Clear - чтобы не перезагружать страницу.
2. содержимое каждого создаваемого элемента рандомное, чтобы небыло фокусов типа:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
    var s = document.createElement('div');
    s.className = 'test';

    var t = window.performance.now();
    for (var i = 0; i < 3000; i++) { 
     content.appendChild(s.cloneNode(false));
    }


3. window.performance.now() - я заменил на new Date() , чтобы и в старых браузерах работало.

Надеюсь нет возражений по правкам?

============================================
Результаты по измеряемым таймингам:

- Chrome - скорость .innerHTML и DOM примерно одинакова (если заполнять чистый блок) или в 4 раза в пользу DOM, когда DOM продолжает добавление.
- FireFox - скорость .innerHTML и DOM примерно одинакова (если заполнять чистый блок) или в 3,5 раза в пользу DOM, когда DOM продолжает добавление.
- IE11 - скорость .innerHTML выше в 8-10 раз при любом типе заполнения.
- Opera 12 - скорость .innerHTML выше в 1.5 раза, чем DOM (если заполнять чистый блок) или одинакова, когда DOM продолжает добавление.


Результаты по отображению изменений на планшете и SmartTV :
.innerHTML рвёт DOM по скорости отображения (рендерингу) после заполнения блока дочерними элементами,
чем больше создаётся html-элементов, тем более видна разница, которая достигает 10 и более раз.
но тайминги показывают более высокую скорость DOM, ага...

вот этот тест
...
Рейтинг: 0 / 0
Virtual DOM ( ReactJS )
    #39194791
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
P.S. я могу исправить в тесте количество создаваемых элементов, вместо 3000 сделать 5000 или 10000 - тогда на мобильных сразу видна разница в скорости, и она очень сильно растёт при росте количества создаваемых элементов.

localvoidв любой ситуации будет значительно медленнее во всех браузерах кроме старых IE.
Мне кажется, Вы вводите нас в заблуждение.
...
Рейтинг: 0 / 0
3 сообщений из 28, страница 2 из 2
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Virtual DOM ( ReactJS )
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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