Быстро о быстром
DESCRIPTION
Коротко о том, как может работать быстрее, если решать задачи немного иначе.TRANSCRIPT
![Page 1: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/1.jpg)
Быстро о быстром
Роман Дворнов, Ostrovok.ruМарт 2014
![Page 2: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/2.jpg)
О себе
• Работаю в Ostrovok.ru
• Cпециализируюсь на разработке одностраничных веб-приложений
• Автор и мейнтейнер фреймворка basis.js
2
![Page 3: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/3.jpg)
Что делать чтобы работало быстро?
3
![Page 4: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/4.jpg)
Если откинуть все лишнее, то основные затраты этопредставления и работа с
данными
4
![Page 5: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/5.jpg)
Представления
5
![Page 6: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/6.jpg)
Самая ресурсоемкая задача – создание и обслуживание DOM
6
![Page 7: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/7.jpg)
Для упрощения работы с DOM используются шаблонизаторы
7
![Page 8: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/8.jpg)
Шаблонизаторы
8
![Page 9: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/9.jpg)
Задача шаблонизатора
Описание(шаблон)
DOMfragment
Шаблонизатор
9
![Page 10: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/10.jpg)
Чтобы не делать так...
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({ .. });
![Page 11: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/11.jpg)
Шаблонизаторов много
11
garann.github.io/template-chooser/
![Page 12: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/12.jpg)
12
Я тут новый шаблонизатор замутил...
![Page 13: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/13.jpg)
Принцип работыодин и тот же
13
![Page 14: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/14.jpg)
ПодготовкаОписание(шаблон)
Функцияcompile
14
function compile(string){ // описание + regexp –> code
return new Function('data', code);};
Это и есть основная задача шаблонизатора
![Page 15: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/15.jpg)
Производство
Функция
15
А это на ваших плечах, или плечах фреймворка
![Page 16: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/16.jpg)
Производство
data Функция
15
А это на ваших плечах, или плечах фреймворка
![Page 17: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/17.jpg)
Производство
data Функция HTML
15
А это на ваших плечах, или плечах фреймворка
![Page 18: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/18.jpg)
Производство
data Функция innerHTMLHTML
15
А это на ваших плечах, или плечах фреймворка
![Page 19: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/19.jpg)
Производство
data Функция innerHTMLHTML DOM
15
А это на ваших плечах, или плечах фреймворка
![Page 20: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/20.jpg)
Производство
data Функция innerHTMLHTML DOM
15
А это на ваших плечах, или плечах фреймворка
Пост-процессинг
![Page 21: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/21.jpg)
Плюсы подхода
• Работает• Привычно• Просто
16
![Page 22: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/22.jpg)
Здесь был список из 146 пунктов насколько
этот подход неэффективен
17
![Page 23: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/23.jpg)
А как надо то?
18
![Page 24: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/24.jpg)
Шаблон → DOM
19
Описание
![Page 25: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/25.jpg)
эталон(DOM fragment)
Созданиеэталонного DOM
Шаблон → DOM
19
Описание
![Page 26: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/26.jpg)
функция(фабрика экземпляров)
Генерацияфункции
эталон(DOM fragment)
Созданиеэталонного DOM
Шаблон → DOM
19
Описание
![Page 27: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/27.jpg)
функция(фабрика экземпляров)
Генерацияфункции
эталон(DOM fragment)
Созданиеэталонного DOM
Шаблон → DOM
19
Описание
DOM fragment(экземпляр)
Клонирование
![Page 28: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/28.jpg)
функция(фабрика экземпляров)
Генерацияфункции
эталон(DOM fragment)
Созданиеэталонного DOM
Шаблон → DOM
19
Описание
DOM fragment(экземпляр)
Клонирование Наведениессылок и
обслуживание
![Page 29: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/29.jpg)
Это упрощенная схема работы
шаблонизатора в basis.js
20
![Page 30: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/30.jpg)
Разработчики Ember пытаются создать что-то
подобное
21
![Page 31: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/31.jpg)
HTMLBars
Описание(шаблон)
Данные
22
![Page 32: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/32.jpg)
Handlerbars
HTMLBars
Описание(шаблон)
Данные
22
![Page 33: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/33.jpg)
Функция
Handlerbars
HTMLBars
Описание(шаблон)
Данные
22
![Page 34: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/34.jpg)
Функция
Handlerbars
HTMLBars
Описание(шаблон)
Данные
22
![Page 35: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/35.jpg)
String (HTML)
Функция
Handlerbars
HTMLBars
Описание(шаблон)
Данные
22
![Page 36: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/36.jpg)
String (HTML)
Функция
Handlerbars HTMLBars
HTMLBars
Описание(шаблон)
Данные
22
![Page 37: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/37.jpg)
Функция
String (HTML)
Функция
Handlerbars HTMLBars
HTMLBars
Описание(шаблон)
Данные
22
![Page 38: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/38.jpg)
Функция
String (HTML)
Функция
Handlerbars HTMLBars
HTMLBars
Описание(шаблон)
Данные
22
![Page 39: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/39.jpg)
DOM
Функция
String (HTML)
Функция
Handlerbars HTMLBars
HTMLBars
Описание(шаблон)
Данные
22
![Page 40: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/40.jpg)
Принципы работы basis.template и HTMLBars
очень похожи
Основные отличия: формат описания и реализация
23
![Page 41: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/41.jpg)
basis.template HTMLBars
Production ready В разработке
24
![Page 42: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/42.jpg)
HTML, DOM...К чему все это?
25
![Page 43: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/43.jpg)
Скорость!26
![Page 44: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/44.jpg)
basis-templates.js
27
basis.js template & l10n modulesas standalone library
basisjs.com/templates
![Page 45: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/45.jpg)
backbone.js – 510 ms
backbone.js + bbt.js – 202 ms
28
bbt.js – backbone basis-templates plugin
TodoMVC1 000 пунктов
![Page 46: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/46.jpg)
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
![Page 47: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/47.jpg)
Подробнее в докладе
Как построить DOM
30
tinyurl.com/build-dom
![Page 48: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/48.jpg)
Данные
31
![Page 49: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/49.jpg)
Под работой с данными подразумевается
модели, коллекции и т.д.
32
![Page 50: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/50.jpg)
Один и тот же функционал можно реализовать по-разному
33
Ваш К.О.
![Page 51: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/51.jpg)
Создание моделей
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
![Page 52: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/52.jpg)
А еще...
• JSON.parse
• GC
• Создание коллекций• Логика и расчеты• ...
35
![Page 53: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/53.jpg)
TodoMVC
36
100 todo 1000 todo
Backbone.js + bbt.js 18 ms 202 ms
basis.js 8 ms 95 ms
В основном разницаиз-за медленной работы с данными в Backbone
![Page 54: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/54.jpg)
Подробнее в докладе
Не бойся, это всего лишь данные... просто их много
37
tinyurl.com/client-side-big-data
![Page 55: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/55.jpg)
Как добиться хороших результатов?
38
![Page 56: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/56.jpg)
Простые советы
• Делать как можно меньше• Хранить как можно проще• Не создавать лишних структур, не клонировать
• Агрегировать события
39
![Page 57: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/57.jpg)
Основной совет
40
![Page 58: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/58.jpg)
Профилировать
41
![Page 59: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/59.jpg)
Профилировать!
42
![Page 60: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/60.jpg)
Профилировать!!!
43
![Page 61: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/61.jpg)
Общий сценарий
1.Пишем код
2.Профилируем
3. Думаем как оптимизировать
44
![Page 62: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/62.jpg)
Общий сценарий
1.Пишем код
2.Профилируем
3. Думаем как оптимизировать
x 10 000 раз
44
![Page 63: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/63.jpg)
Общий сценарий
1.Пишем код
2.Профилируем
3. Думаем как оптимизировать
x 10 000 раз
44
= быстрый код
![Page 64: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/64.jpg)
Или используем фреймворк, где это уже
сделано
45
![Page 65: Быстро о быстром](https://reader033.vdocument.in/reader033/viewer/2022052307/558b3d3fd8b42a0b058b4680/html5/thumbnails/65.jpg)
Чем быстрее работает базовый код – тем больше полезного можно сделать
46