DiffHTML.js — утилита для патчинга DOM | Хостинг за 90 р. от cyberhost.biz

Что такое DiffHTML.js?
DiffHTML — эта утилита для патчинга (частичного изменения) DOM-дерева. Она умеет находить разницу между существующим DOM-деревом и HTML-строкой, между двумя деревьями. В результате будут произведены только те изменения, которые реально имеют место быть. Те элементы которых не было — вставятся, атрибуты которые были реально изменены — изменятся, и только они. Остальные элементы останутся без изменений.
<br/>
Зачем это?
Просто чтобы не трогать те элементы в которых не было изменений. Это в теории дешевле, чем ре-рендерить полностью все дерево.

Как же React.JS?
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>’);
В общем идея очень простая и в то же время достаточно мощная.

Минусы (готовность для продакшена)

Проект молодой, поэтому здесь баги — это нормально
Проблемы с навешиванием событий (старые события автоматически не удаляются)
Нет большого количества информации вокруг этой библиотеки
Нет бенчмарков

Плюсы

В теории, быстрей простой перерисовки всех элементов внутри контейнера
Есть middleware, можно контролировать проецес патчинга
Есть подобие Virtual DOM, можно писать React-like шаблоны
Меньше проводить времени с точечными модификациями DOM-дерева вручную
Отзывчивый разработчик

Где применять?
Лично я вижу сферы применения:

В старом коде, работающем на базе традиционных шаблонов и el.innerHTML вставки, можно добиться ускорения производительности
Для сложных SaaS виджетов, где важен размер подключаемых библиотек
Для pet-проектов, где React избыточен, но на Vanilla.JS уже не хочется

А ToDo?
Есть ToDo, но как мне показалось — код сильно избыточен, поэтому я сделал свое:

Мой ToDo (DiffHTML, Babel DiffHTML tag transformer, Redux)

Вывод
Библиотека сырая, но она мне нравится так как проста и не требует радикальных изменений в давно привычном подходе обновлять все внутри контейнера. Для продакшена брать уж точно не стоит, но попробовать можно. Даже просто для того чтобы проверить как оно работает, и может быть помочь с поиском багов.

Будет очень кстати, если кто то возьмется померять производительность.

» Github: github.com/tbranyen/diffhtml
» Issues: github.com/tbranyen/diffhtml/issues

Спасибо за чтение!

Update: в комментариях подсказали, что еще есть аналог — morphdom (и форк).

Update 2: в одном из комментариев продолжил идею об уходе от работы напрямую с DOM к работе исключительно с шаблонами. Пересобрать HTML-строку всего приложения из шаблонов не так дорого, и пусть DiffHTML посчитает разницу и внесет изменения в DOM.

javascript,
dom

Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама
Хабы

Все хабы
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама
Похожие публикации

↑
—
↓
2,4k
Добавить в избранное
22

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>');
В общем идея очень простая и в то же время достаточно мощная.