- PVSM.RU - https://www.pvsm.ru -
DiffHTML — эта утилита для патчинга (частичного изменения) DOM-дерева. Она умеет находить разницу между существующим DOM-деревом и HTML-строкой, между двумя деревьями. В результате будут произведены только те изменения, которые реально имеют место быть. Те элементы которых не было — вставятся, атрибуты которые были реально изменены — изменятся, и только они. Остальные элементы останутся без изменений.
Просто чтобы не трогать те элементы в которых не было изменений. Это в теории дешевле, чем ре-рендерить полностью все дерево.
React делает почти тоже самое, но у DiffHTML есть существенный козырь — эта библиотека по-умолчанию не требует практически никакой инфраструктуры вокруг себя. Ни сборки, ни специальных трансформаций в реакт-объекты. Вы просто можете сделать следующее:
diff.innerHTML(document.body, '<h1>Hello world!</h1>');
и объект появится в DOM-дереве. Далее…
diff.innerHTML(document.body, '<h1 class=”title”>Hello world!</h1>');
и только атрибут class будет добавлен. Просто добавим параграф:
diff.innerHTML(document.body, '<h1 class=”title”>Hello world!</h1><p>Dear, World!</p>');
В общем идея очень простая и в то же время достаточно мощная.
Лично я вижу сферы применения:
el.innerHTML
вставки, можно добиться ускорения производительностиЕсть ToDo: github.com/tbranyen/todomvc [2], но как мне показалось — код сильно избыточен, поэтому я сделал свое:
Мое ToDo: github.com/jmas/htmldiff-todo [3] (DiffHTML, Babel DiffHTML tag transformer, Redux)
Библиотека сырая, но тем не менее она мне нравится потому что простая и не требует радикальных изменений для старого (для кого то давно ставшего привычным) подхода обновлять все внутри контейнера. Для продакшена брать уж точно не стоит, но попробовать можно. Даже просто для того чтобы проверить как оно работает, и может быть помочь с поиском багов.
Будет очень кстати, если кто то возьмется померять производительность.
Github: github.com/tbranyen/diffhtml [4]
Issues: github.com/tbranyen/diffhtml/issues [5]
Спасибо за чтение!
Update
В комментариях подсказали, что еще есть аналог — morphdom [6] (и форк [7]).
Автор: jMas
Источник [8]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/181379
Ссылки в тексте:
[1] Image: https://habrahabr.ru/post/308856/
[2] github.com/tbranyen/todomvc: https://github.com/tbranyen/todomvc
[3] github.com/jmas/htmldiff-todo: https://github.com/jmas/htmldiff-todo
[4] github.com/tbranyen/diffhtml: https://github.com/tbranyen/diffhtml
[5] github.com/tbranyen/diffhtml/issues: https://github.com/tbranyen/diffhtml/issues
[6] morphdom: https://github.com/patrick-steele-idem/morphdom
[7] форк: https://github.com/Riim/morph-element
[8] Источник: https://habrahabr.ru/post/308856/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best
Нажмите здесь для печати.