Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Быстрый рендеринг с DOM шаблонизаторами / Борис Каплуновский (aviasales.ru)

4,778 views

Published on

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 библиотеки времени исполнения.

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Быстрый рендеринг с DOM шаблонизаторами / Борис Каплуновский (aviasales.ru)

  1. 1. Быстрый рендеринг с DOM шаблонизаторами Каплуновский Борис @bskaplou bk@aviasales.ru
  2. 2. Agenda ● Правила игры ● Типы шаблонизаторов ● Минусы AngularJS/ReactJS ● Плюсы менее известных библиотек ● Шаблонизатор temple
  3. 3. Правила игры ● UX зависит от: – Скорости инициализации страницы – Скорости реакции интерфейса – Потребления ресурсов (gc) – Размера библиотеки
  4. 4. Строковые шаблонизаторы doT, Handlebars и другие – При каждом изменении данных перестраивается значительный кусок DOM – Использованный участок DOM выбрасывается – Не используются якоря для обновления данных
  5. 5. DOM API for the WIN
  6. 6. DOM API быстрее на мобильных устройствах http://jsperf.com/innerhtml-vs-domjs
  7. 7. Создание DOM через API ● Много скучного кода → создание одного элемента 5-10 строк кода document.createElement document.createTextNode element.appendChild element.setAttribute textNode.nodeValue
  8. 8. DOM шаблонизаторы ● Можно сохранить DOM обьекты в переменных для обновления данных ● Можно использовать один участок DOM несколько раз
  9. 9. Где оступились гиганты
  10. 10. Почему тормозит AngularJS ● Компиляция шаблона из DOM или строки на клиенте – Чем больше шаблонов тем медленнее загрузка
  11. 11. Почему тормозит AngularJS ● $watcher плодятся и если за ними не следить, бьют по производительности
  12. 12. Почему тормозит AngularJS ● Работа с DOM разбросана по директивам ● Отсутствие true way способа работы с DOM ● ~50kb min gz размер библиотеки
  13. 13. Почему тормозит ReactJS ● Кроме DOM в памяти хранятся ещё 2 копии VirtualDOM ● На каждое изменение данных создаётся ещё одна копия VirtualDOM ● ~35kb min gz размер библиотеки
  14. 14. ReactJS ничего не знает о семантике данных <div> <div> <i>{{VALUE}}</i> </div> </div> ● Чтобы обновить VALUE VirtualDOM должен сравнить 3 элемента и одну текстовую ноду
  15. 15. А теперь кое-что другое
  16. 16. RiotJS – правильный AngularJS ● Правильный размер 5kb min gz ● Шаблоны используют семантику данных ● Компиляция шаблонов всё ещё происходит на клиенте
  17. 17. PaperclipJS ● Использует cloneNode для создания быстрого создания копии участков DOM ● ~40kb min gz размер библиотеки ● Всё ещё beta http://paperclipjs.com/
  18. 18. Техники позволяющие ускорить работу с DOM
  19. 19. VirtualDOM ● Плюсы: – Позволяет сократить вызовы к DOM ● Минусы – Overhead на создание копии DOM – Сложный алгоритм сравнения – Алгоритм ничего не знает о стуктуре данных
  20. 20. сloneNode & DocumentFragment http://jsperf.com/clonenode-vs-createelement-performance/55
  21. 21. Создание DOM участков заранее ● REST запрос на сервер ~20ms ● Создание DOM под данные ● Разбор ответа сервера ● Вставка данных в готовый DOM ● Добавление DOM в страницу
  22. 22. Простой шаблонизатор TEMPLE
  23. 23. temple ● Шаблоны компилируются в JavaScript в момент сборки приложения ● Возможность создавать куски DOM заранее ● Переиспользование шаблонов ● Скромный размер библиотеки 700b min gz ● Максимально быстрое обновление DOM
  24. 24. Temple шаблон <div class=”{{div_classes}}”> <span class=”{{span_classes}}”> {{value}} </span> </div>
  25. 25. Temple шаблон ● <forall key=”k”> для циклов ● <if key=”k”> для ветвлений ● Не поддерживает выражения – Используйте Presenter или ViewModel для адаптации данных
  26. 26. Создание шаблона var item = pool.get(“item”) item.update(data); parent.appendChild(item.root()); ● Просто интегрируется в приложение item.remove();
  27. 27. Заблаговременное создание DOM pool.build_cache({“item”: 10}); ● После этого вызова получение DOM для шаблона item происходит мгновенно ● Кешироваль шаблоны можно ожидая ответа сервера или DOMContentLoaded
  28. 28. Быстрое внесение изменений в DOM item.update({“value”: 10}); Просто делает e0.nodeValue = 10;//глубина стека 2 Но можно ещё быстрее item.value(10);//глубина стека 1
  29. 29. Переиспользование шаблонов pool.release(“item”, item); Этот же шаблон будет использован позднее
  30. 30. Benchmarks INIT http://jsperf.com/init-temple-vs-react
  31. 31. Benchmarks soft UPDATE http://jsperf.com/soft-update-temple-vs-react
  32. 32. Benchmarks hard UPDATE http://jsperf.com/hard-update-temple-vs-react
  33. 33. Temple не работает с событиями Используйте: – Стандартные события – Библиотеки для работы с событиями ● Мы используем domdelegate от Ftlabs https://github.com/ftlabs/ftdomdelegate
  34. 34. Temple успешно работает m.aviasales.ru – 10kb шаблоны – 58kb всё приложение d.search.aviasales.ru – 15kb шаблоны – 70kb всё приложение
  35. 35. Fork Me https://github.com/KosyanMedia/temple Всё ещё сыро но: – Есть примеры и документация – Есть плагины для gulp и grunt – Хорошая производительность
  36. 36. Q & A

×