1. Типы шаблонизаторов DOM/innerHTML. 2. Внутренности AngularJS и почему он тормозит. 3. Внутренности ReactJS и почему он тормозит. 4. Менее раскрученные решения Blaze/PaperclipJS/Riot и что там сделано лучше. 5. Плюсы и минусы virtualdom. 6. Работа с DOM может быть быстрее, если: 6.1 Использовать одни и те-же участки DOM несколько раз. 6.2 Сокращать количество reflow с DocumentFragment. 6.3 Быстрое создание повторяющихся участков DOM с помощью cloneNode. 6.4 Создавать куски DOM ahead of time. 7. Встречаем temple - шаблонизатор, работающий в разы быстрее reactjs и не требующий загрузки 40k библиотеки времени исполнения.

1. Быстрый рендеринг с DOM
шаблонизаторами
Каплуновский Борис
@bskaplou
bk@aviasales.ru

2. Agenda
● Правила игры
● Типы шаблонизаторов
● Минусы AngularJS/ReactJS
● Плюсы менее известных библиотек
● Шаблонизатор temple

3. Правила игры
● UX зависит от:
– Скорости инициализации страницы
– Скорости реакции интерфейса
– Потребления ресурсов (gc)
– Размера библиотеки

4. Строковые шаблонизаторы
doT, Handlebars и другие
– При каждом изменении данных
перестраивается значительный кусок
DOM
– Использованный участок DOM
выбрасывается
– Не используются якоря для обновления
данных

5. DOM API
for the WIN

6. DOM API быстрее на мобильных
устройствах
http://jsperf.com/innerhtml-vs-domjs

7. Создание DOM через API
● Много скучного кода → создание одного
элемента 5-10 строк кода
document.createElement
document.createTextNode
element.appendChild
element.setAttribute
textNode.nodeValue

8. DOM шаблонизаторы
● Можно сохранить DOM обьекты в
переменных для обновления данных
● Можно использовать один участок DOM
несколько раз

9. Где оступились гиганты

10. Почему тормозит AngularJS
● Компиляция шаблона из DOM или
строки на клиенте
– Чем больше шаблонов тем медленнее
загрузка

11. Почему тормозит AngularJS
● $watcher плодятся и если за ними не
следить, бьют по производительности

12. Почему тормозит AngularJS
● Работа с DOM разбросана по
директивам
● Отсутствие true way способа работы с
DOM
● ~50kb min gz размер библиотеки

13. Почему тормозит ReactJS
● Кроме DOM в памяти хранятся ещё 2
копии VirtualDOM
● На каждое изменение данных создаётся
ещё одна копия VirtualDOM
● ~35kb min gz размер библиотеки

14. ReactJS ничего не знает о
семантике данных
<div>
<div>
<i>{{VALUE}}</i>
</div>
</div>
● Чтобы обновить VALUE VirtualDOM
должен сравнить 3 элемента и одну
текстовую ноду

15. А теперь кое-что другое

16. RiotJS – правильный AngularJS
● Правильный размер 5kb min gz
● Шаблоны используют семантику данных
● Компиляция шаблонов всё ещё
происходит на клиенте

17. PaperclipJS
● Использует cloneNode для создания
быстрого создания копии участков DOM
● ~40kb min gz размер библиотеки
● Всё ещё beta
http://paperclipjs.com/

18. Техники позволяющие ускорить
работу с DOM

19. VirtualDOM
● Плюсы:
– Позволяет сократить вызовы к DOM
● Минусы
– Overhead на создание копии DOM
– Сложный алгоритм сравнения
– Алгоритм ничего не знает о стуктуре
данных

20. сloneNode & DocumentFragment
http://jsperf.com/clonenode-vs-createelement-performance/55

21. Создание DOM участков
заранее
● REST запрос на сервер ~20ms
● Создание DOM под данные
● Разбор ответа сервера
● Вставка данных в готовый DOM
● Добавление DOM в страницу

22. Простой шаблонизатор
TEMPLE

23. temple
● Шаблоны компилируются в JavaScript в
момент сборки приложения
● Возможность создавать куски DOM
заранее
● Переиспользование шаблонов
● Скромный размер библиотеки 700b min
gz
● Максимально быстрое обновление DOM

24. Temple шаблон
<div class=”{{div_classes}}”>
<span class=”{{span_classes}}”>
{{value}}
</span>
</div>

25. Temple шаблон
● <forall key=”k”> для циклов
● <if key=”k”> для ветвлений
● Не поддерживает выражения
– Используйте Presenter или ViewModel
для адаптации данных

26. Создание шаблона
var item = pool.get(“item”)
item.update(data);
parent.appendChild(item.root());
● Просто интегрируется в приложение
item.remove();

27. Заблаговременное создание
DOM
pool.build_cache({“item”: 10});
● После этого вызова получение DOM для
шаблона item происходит мгновенно
● Кешироваль шаблоны можно ожидая
ответа сервера или DOMContentLoaded

28. Быстрое внесение изменений в
DOM
item.update({“value”: 10});
Просто делает
e0.nodeValue = 10;//глубина стека 2
Но можно ещё быстрее
item.value(10);//глубина стека 1

29. Переиспользование шаблонов
pool.release(“item”, item);
Этот же шаблон будет использован
позднее

30. Benchmarks INIT
http://jsperf.com/init-temple-vs-react

31. Benchmarks soft UPDATE
http://jsperf.com/soft-update-temple-vs-react

32. Benchmarks hard UPDATE
http://jsperf.com/hard-update-temple-vs-react

33. Temple не работает с
событиями
Используйте:
– Стандартные события
– Библиотеки для работы с событиями
● Мы используем domdelegate от Ftlabs
https://github.com/ftlabs/ftdomdelegate

34. Temple успешно работает
m.aviasales.ru
– 10kb шаблоны
– 58kb всё приложение
d.search.aviasales.ru
– 15kb шаблоны
– 70kb всё приложение

35. Fork Me
https://github.com/KosyanMedia/temple
Всё ещё сыро но:
– Есть примеры и документация
– Есть плагины для gulp и grunt
– Хорошая производительность

36. Q & A