Быстро о быстром

3,874 views
3,896 views

Published on

Коротко о том, как может работать быстрее, если решать задачи немного иначе.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,874
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Быстро о быстром

  1. 1. Быстро о быстром Роман Дворнов, Ostrovok.ru Март 2014
  2. 2. О себе • Работаю в Ostrovok.ru • Cпециализируюсь на разработке одностраничных веб-приложений • Автор и мейнтейнер фреймворка basis.js 2
  3. 3. Что делать чтобы работало быстро? 3
  4. 4. Если откинуть все лишнее, то основные затраты это представления и работа с данными 4
  5. 5. Представления 5
  6. 6. Самая ресурсоемкая задача – создание и обслуживание DOM 6
  7. 7. Для упрощения работы с DOM используются шаблонизаторы 7
  8. 8. Шаблонизаторы 8
  9. 9. Задача шаблонизатора Описание (шаблон) DOM fragment Шаблонизатор 9
  10. 10. Чтобы не делать так... 10 function renderList(data){ var html = ''; html = html + '<ul class="mylist' + (cls ? ' ' + cls : '') + '">'; for (var i = 0; i < items.length; i++) html = html + '<li class="item ' + (items[i].selected ? ' selected' : '') + '>' + items[i].title + '</li>'; html = html + '</ul>'; return html; }; ... element.innerHTML = renderList({ .. });
  11. 11. Шаблонизаторов много 11 garann.github.io/template-chooser/
  12. 12. 12 Я тут новый шаблонизатор замутил...
  13. 13. Принцип работы один и тот же 13
  14. 14. Подготовка Описание (шаблон) Функция compile 14 function compile(string){ // описание + regexp –> code return new Function('data', code); }; Это и есть основная задача шаблонизатора
  15. 15. Производство Функция 15 А это на ваших плечах, или плечах фреймворка
  16. 16. Производство data Функция 15 А это на ваших плечах, или плечах фреймворка
  17. 17. Производство data Функция HTML 15 А это на ваших плечах, или плечах фреймворка
  18. 18. Производство data Функция innerHTMLHTML 15 А это на ваших плечах, или плечах фреймворка
  19. 19. Производство data Функция innerHTMLHTML DOM 15 А это на ваших плечах, или плечах фреймворка
  20. 20. Производство data Функция innerHTMLHTML DOM 15 А это на ваших плечах, или плечах фреймворка Пост- процессинг
  21. 21. Плюсы подхода • Работает • Привычно • Просто 16
  22. 22. Здесь был список из 146 пунктов насколько этот подход неэффективен 17
  23. 23. А как надо то? 18
  24. 24. Шаблон → DOM 19 Описание
  25. 25. эталон (DOM fragment) Создание эталонного DOM Шаблон → DOM 19 Описание
  26. 26. функция (фабрика экземпляров) Генерация функции эталон (DOM fragment) Создание эталонного DOM Шаблон → DOM 19 Описание
  27. 27. функция (фабрика экземпляров) Генерация функции эталон (DOM fragment) Создание эталонного DOM Шаблон → DOM 19 Описание DOM fragment (экземпляр) Клонирование
  28. 28. функция (фабрика экземпляров) Генерация функции эталон (DOM fragment) Создание эталонного DOM Шаблон → DOM 19 Описание DOM fragment (экземпляр) Клонирование Наведение ссылок и обслуживание
  29. 29. Это упрощенная схема работы шаблонизатора в basis.js 20
  30. 30. Разработчики Ember пытаются создать что-то подобное 21
  31. 31. HTMLBars Описание (шаблон) Данные 22
  32. 32. Handlerbars HTMLBars Описание (шаблон) Данные 22
  33. 33. Функция Handlerbars HTMLBars Описание (шаблон) Данные 22
  34. 34. Функция Handlerbars HTMLBars Описание (шаблон) Данные 22
  35. 35. String (HTML) Функция Handlerbars HTMLBars Описание (шаблон) Данные 22
  36. 36. String (HTML) Функция Handlerbars HTMLBars HTMLBars Описание (шаблон) Данные 22
  37. 37. Функция String (HTML) Функция Handlerbars HTMLBars HTMLBars Описание (шаблон) Данные 22
  38. 38. Функция String (HTML) Функция Handlerbars HTMLBars HTMLBars Описание (шаблон) Данные 22
  39. 39. DOM Функция String (HTML) Функция Handlerbars HTMLBars HTMLBars Описание (шаблон) Данные 22
  40. 40. Принципы работы basis.template и HTMLBars очень похожи Основные отличия: формат описания и реализация 23
  41. 41. basis.template HTMLBars Production ready В разработке 24
  42. 42. HTML, DOM... К чему все это? 25
  43. 43. Скорость! 26
  44. 44. basis-templates.js 27 basis.js template & l10n modules as standalone library basisjs.com/templates
  45. 45. backbone.js – 510 ms backbone.js + bbt.js – 202 ms 28 bbt.js – backbone basis-templates plugin TodoMVC 1 000 пунктов
  46. 46. TodoMVC 29 100 todo 1000 todo AngularJS 125 ms 1491 ms Backbone 53 ms 510 ms Knockout 39 ms 489 ms vanilla 23 ms 1882 ms jQuery 20 ms 184 ms Backbone + bbt.js 18 ms 202 ms basis.js 8 ms 95 ms
  47. 47. Подробнее в докладе Как построить DOM 30 tinyurl.com/build-dom
  48. 48. Данные 31
  49. 49. Под работой с данными подразумевается модели, коллекции и т.д. 32
  50. 50. Один и тот же функционал можно реализовать по-разному 33 Ваш К.О.
  51. 51. Создание моделей 34 Решение 1 000 10 000 100 000 Basis 2 ms 22 ms 220 ms Backbone 25 ms 248 ms 2 480 ms Ember 25 ms 250 ms 2 500 ms 10 полей, 1 listener
  52. 52. А еще... • JSON.parse • GC • Создание коллекций • Логика и расчеты • ... 35
  53. 53. TodoMVC 36 100 todo 1000 todo Backbone.js + bbt.js 18 ms 202 ms basis.js 8 ms 95 ms В основном разница из-за медленной работы с данными в Backbone
  54. 54. Подробнее в докладе Не бойся, это всего лишь данные... просто их много 37 tinyurl.com/client-side-big-data
  55. 55. Как добиться хороших результатов? 38
  56. 56. Простые советы • Делать как можно меньше • Хранить как можно проще • Не создавать лишних структур, не клонировать • Агрегировать события 39
  57. 57. Основной совет 40
  58. 58. Профилировать 41
  59. 59. Профилировать! 42
  60. 60. Профилировать!!! 43
  61. 61. Общий сценарий 1. Пишем код 2. Профилируем 3. Думаем как оптимизировать 44
  62. 62. Общий сценарий 1. Пишем код 2. Профилируем 3. Думаем как оптимизировать x 10 000 раз 44
  63. 63. Общий сценарий 1. Пишем код 2. Профилируем 3. Думаем как оптимизировать x 10 000 раз 44 = быстрый код
  64. 64. Или используем фреймворк, где это уже сделано 45
  65. 65. Чем быстрее работает базовый код – тем больше полезного можно сделать 46
  66. 66. Вопросы? 47 Роман Дворнов @rdvornov rdvornov@gmail.com basis.js basisjs.com github.com/basisjs

×