advertisement

Не бойся, это всего лишь данные... просто их много

40 %
60 %
advertisement
Information about Не бойся, это всего лишь данные... просто их много
Technology

Published on March 14, 2014

Author: basisjs

Source: slideshare.net

Description

За последние 15 лет веб сильно изменился и ускорился. Но большинство по-прежнему боится большого количества данных и сложной логики на клиенте. Потому что "тормозит".
Я хочу сломать стереотипы и показать, как начать делать крутые штуки на client-side. Тысячи и сотни тысяч объектов, разные типы, зависимые вычисляемые свойства, агрегация, множество вариантов отображения. Все это в вашем браузере. Без тормозов, регистраций, смс.
advertisement

Не бойся,это всего лишь данные... просто их много Роман Дворнов, Ostrovok.ru Екатеринбург, 14 марта 2014 1

О себе • Работаю в Ostrovok.ru • Cпециализируюсь на разработке одностраничных веб-приложений • Автор и мейнтейнер фреймворка basis.js 2

Данные 3

Когда мы говорим про данные на client-side, чаще всего, подразумеваем объекты и их наборы (модели и коллекции) 4

Сегодня браузеры дают огромные возможности... 5

... но многие по прежнему скептически относятся к сложным вычислениям и системам на client-side 6

Client-side глазами скептиков... 7

На самом ли деле все так плохо? 8

Хороший «плохой» пример 9 Или как заставить браузер страдать

bower.io/search 10

~10 000 модулей ~2,5 Mb JSON 11

~10 000 модулей ~2,5 Mb JSON ~8 сек браузер "висит" 12

ААааа!!!!.. Все пропало!... Нужно грузить постранично...

14 Постойте, не так быстро...

Почему? 15

Что делает скрипт 16 • загружает json файл (массив объектов) • генерирует 4 небольших списка • генерирует таблицу на ~10 000 строк • отдает таблицу компоненту списка, который разбивает её на страницы и удаляет все строки, кроме первых десяти

17

Что делает браузер • javascript ~2,85 сек • парсиг html (из шаблонов) ~0,75 сек • расчет стилей ~1,6 сек • layout (175 000+ узлов) ~2.8 сек • еще несколько секунд асинхронно (по 100) "индексируются" строки для поиска 18

Можно сделать быстрее? 19

Можно • начальная генерация view ~0,04 сек • применение данных ~0,15* сек 20 * можно быстрее lahmatiy.github.io/bower-search github.com/lahmatiy/bower-search

21 Применение данных только javascript – ничего лишнего

22 Применение данных ~150ms ~20ms JSON.parse, ~20ms GC

Чак одобряет 23

Хорошие новости: Переделали – теперь работает быстро 24

Вывод: Дело не в количестве данных, а в неэффективном подходе 25

Проблема современного front-end'а 26

Многие веб-разработчики думают через призму jQuery-like подходов, размышляют про данные через представление (верстку) 27

28 Пара примеров По мотивам bower.io/search

29 + = $('#components') .find('.created time, .updated time') .timeago(); Разметка ради разметки

30 Невидимая ячейка, ее innerHTML используется для поиска

31 Item.prototype.values = function(tr, columns) { var values = {}; for (var i = 0; i < columns.length; i++) { var name = columns[i]; var td = tr.getElementsByClassName(name)[0]; values[name] = td ? td.innerHTML : ''; } return values; }; Получение значений для поиска

В общем случае 32 HTML DOMData Data

В общем случае 33 • Имеем данные • Генерируем HTML • Конвертируем в DOM • Ищем DOM-узлы (чаще через селектор) • Читаем значения из DOM-узлов • Вычисляем новые значения • Записываем в DOM

В общем случае 34 • Имеем данные • Генерируем HTML • Конвертируем в DOM • Ищем DOM-узлы (чаще через селектор) • Читаем значения из DOM-узлов • Вычисляем новые значение • Записываем в DOM wtf?!

Есть данные в исходном виде, но берутся значения сохраненные в DOM 35

Фактически, DOM используется как хранилище данных 36

И это самое медленное, что можно придумать 37

Уверен, вы так не делаете 38

0,2 vs. 8,0 39 1 : 40

А как надо-то? 40

Самое главное: Не использовать DOM для хранения данных 41

Работа с данными должна происходить в абстрактном слое – вне представления 42

У представлений должна быть пасивная роль – отображать состояние данных 43

Идеальный вариант 44 Data DOM

Helpers Helpers Идеальный вариант 45 Data DOM View bindings ... Model Collection ...

Каковы пределы? 46

С каким количеством моделей мы можем работать? 47

1 000, 10 000, 100 000?.. 48

1 000, 10 000, 100 000?.. 49 1 000 000?

Конечные ресурсы: память и время 50

Память 51

Все чего-то стоит • массив: 16bytes • +12bytes + 4bytes/item (для литералов) • +72bytes + 4-8bytes/item (если растить) • объект: 12bytes + 4bytes/property • замыкание: 36bytes • контекст: 24bytes + 4bytes/var 52 * стоимость вV8 (Google Chrome)

Данные bower.io/search 53 File ~2,5 Mb Object ~9,0 Mb JSON.parse

Создание моделей 54 Решение 0 полей 10 полей new basis.data.Object() 240 Kb 240 Kb basis.entity.Type() 440 Kb 840 Kb new Backbone.Model() 920 Kb 1 480 Kb Ember.Object.create() 1 040 Kb 1 600 Kb 10 000 экземпляров

Event listeners 55 Фреймворк 1 событие 2 события 3 события Basis 240 Kb 240 Kb 240 Kb Backbone 1 520 Kb 2 860 Kb 3 840 Kb Ember 5 480 Kb 6 520 Kb 7 560 Kb 10 000 экземпляров

Итого 56 Решение 10 полей, 1 listener overhead basis.data 480 Kb 5 % basis.entity 1 080 Kb 12 % Backbone 3 000 Kb 33 % Ember 7 080 Kb 79 % 10 000 экземпляров

А если пойти дальше... 57

Интерполяция 58 Решение 1 000 10 000 100 000 basis.data 0, 05 Mb 0,5 Mb 5 Mb basis.entity 0,1 Mb 1 Mb 10 Mb Backbone 0,3 Mb 3 Mb 30 Mb Ember 0,7 Mb 7 Mb 70 Mb 10 полей, 1 listener

Вывод #1: О памяти, можно не заботиться когда меньше 10 000 моделей 59

Вывод #2: Но при больших количествах объектов, расход памяти является серьезной проблемой 60

Время 61

Парсинг данных bower.io/search 62 JSON.parse ~22 ms

Создание моделей 63 Фреймворк 0 полей 3 поля 10 полей 20 полей basis.data 2 2 2 2 basis.entity 6 14 22 35 Backbone.Model 66 123 238 489 Ember.Object 73 128 201 355 10 000 экземпляров, ms

Разные задачи, разные решения 64 • Произвольные поля • Строгий набор полей • Вычисляемые поля • Индекс • Нормализация значений • Defaults • Rollback • ... basis.entity.Entitybasis.data.Object дешево и сердито дороже, но с плюшками

Event listeners 65 Решение 1 событие 2 события 3 события Basis 0 0 0 Backbone 20 29 38 Ember 49 68 89 10 000 экземпляров, ms

Итого 66 Решение 10 полей, 1 listener overhead basis.data 2 ms 9 % basis.entity 22 ms 100 % Backbone 248 ms 1127 % Ember 250 ms 1136 % 10 000 экземпляров

Меньше overhead – больше полезной нагрузки 67

А если пойти дальше... 68

Интерполяция 69 Решение 1 000 10 000 100 000 basis.data 0 ms 2 ms 20 ms basis.entity 2 ms 22 ms 220 ms Backbone 25 ms 248 ms 2 480 ms Ember 25 ms 250 ms 2 500 ms 10 000 экземпляров

Грубая оценка 70 Решение Кол-во моделей basis.data 6 666 basis.entity 3 636 Backbone 597 Ember 593 Укладываемся в 16ms (60FPS), с учетом JSON.parse

Зачем нужны такие оценки? 71

Чтобы понимать с каким количеством мы можем работать, не причиняя браузеру страдания 72

Есть задачи, где требуется работать с большим количеством моделей 73

Пример 74

75 Клиент для отельеров – Rates & AvailabilityView

Масштабы бедствия 76 • Структура отеля до 300 строк (планируется рост) • Показываем до 2-х лет 300 строк x 730 дней = 219 000 ячеек

Как это работает сейчас • Получаем структуру отеля • Генерируем HTML пустой "таблицы" и вставляем в документ • Используя document.getElementById() получаем ссылки на каждую ячейку • Для каждой ячейки создаем описательный объект 77

Как это работает сейчас • Запрашиваем данные, каждый месяц отдельным запросом • Когда приходят данные, транформируем их и создаем еще один описательный объект хранящий состояние ячейки и связь с другими моделями • Навешиваем на ячейки обработчики событий 78

Знакомо, не правда ли? 79

В цифрах • ~5000 строк plain javascript с минимальным применением jQuery • В среднем 3,5 сек чистое время на генерацию таблицы и применение данных, в худшем случае десятки секунд • В среднем затрачивается 50 Mb памяти, в худшем случае 100-300 Mb 80

Одна из быстрых реализаций с таким подходом 81

Время и память зависят от размеров и количества данных 82

Новый функционал Декабрь, 2013 Новые ограничения

Средний отель • 25 тарифов + 2 новые строки на тариф • = 50 новых строк • = ~18 000 новых ячеек (для года) • = время увеличилось с 3 сек до 3,6 сек (на 16%)

Нужно чтобы было быстрее... 85

Новая реализация 86

Динамический viewport 87

"Рисуем" только то, что попадает в зону видимости 88

Видимая ячейка 89 View Model DataAllotmentDate x y

В видимой области от 200 до 2000 ячеек 90

Повышенные требования • Быстрое создание представлений • Быстрая вставка и удаление представлений • Переиспользование представлений • Быстрое создание моделей • Ленивое создание и расчеты • Малое потребление памяти 91

Повышенные требования • Быстрое создание представлений • Быстрая вставка и удаление представлений • Переиспользование представлений • Быстрое создание моделей • Ленивое создание и расчеты • Малое потребление памяти 92 OK OK OK OK in progress in progress

Ленивая обработка данных 93 • JSON.parse • создание моделей • расчеты • GC • JSON.parse • добавление в cache Отложенное созданиеНемедленное создание В месяце от 1 000 до 10 000 ячеек 40-250ms/месяц 5-25ms/месяц

Ленивая обработка данных 93 Отложенное созданиеНемедленное создание В месяце от 1 000 до 10 000 ячеек 40-250ms/месяц 5-25ms/месяц x12 ~3,0 sec x24 ~6,0 sec x12 ~0,3 sec x24 ~0,6 sec

Ленивое создание моделей Создаются только те модели, что попадают во viewport и те, от которых зависит вид отображаемых ячеек 94

? Расчет стиля ячейки 95 rate

Расчет стиля ячейки 95 rate occupancy occupancy ...

Расчет стиля ячейки 95 rate price price occupancy occupancy ...

Расчет стиля ячейки 95 rate price price room occupancy occupancy ...

Расчет стиля ячейки 95 rate price price fixed_count flexible_count ... room occupancy occupancy ...

Расчет стиля ячейки 95 rate price price disable_fixed disable_flexible ... fixed_count flexible_count ... room occupancy occupancy ...

Расчет стиля ячейки 95 rate price price disable_fixed disable_flexible ... fixed_count flexible_count ... room occupancy occupancy ...

Старт Время: ~1 секунда без учета сетевых издержек Память: 6-10 Mb с постепенным увеличением при смещении viewport'а 96

Scroll 97

3 viewport'а

При сдвиге вычиcляется delta, какие ячейки нужно удалить и какие добавить 99

В среднем удаляется от 20 до 250 ячеек и столько же добавляется 100 А могут замениться и все ячейки viewport'а

Основные операции • Создание представлений ячеек • Вставка и удаление ячеек • Создание моделей • Расчеты 101

Основные операции • Создание представлений ячеек • Вставка и удаление ячеек • Создание моделей • Расчеты 102 Нужно уклыдываться в 16ms

Scroll Сейчас: 30-40 FPS 103

Scroll Цель: 50-60 FPS 104

Demo 105

Заключение 106

Не использовать DOM для хранения данных 107

Можно делать дешевые интерфейсы к данным 108

Можно работать с сотнями тысяч моделей 109

110 Главное, делать это аккуратно ;)

Вопросы? 111 Роман Дворнов @rdvornov rdvornov@gmail.com basis.js basisjs.com github.com/basisjs

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Не бойся, это всего лишь данные просто их много - YouTube

Название: Не бойся, это всего лишь данные просто их много Описание: Доклад ...
Read more

WSD в Новосибирске // Не бойся, это всего лишь данные ...

... это всего лишь данные... просто их много, ... Всё это в вашем ... Не бойся! 2012.08.01 .mov ...
Read more

Российские интернет-технологии 2014

Не бойся, это всего лишь данные... просто их много. ... не упустите последний шанс!
Read more

Быстро - wsd.events

Не бойся, это всего лишь данные... просто их много 40 Чуть позже, не пропустите ;)
Read more

Etrovision и apple –инновации это просто - Documents

Не бойся, это всего лишь данные... просто их много За последние 15 лет веб сильно ...
Read more

Это мы не проходили. - Education

Не бойся, это всего лишь данные... просто их много За последние 15 лет веб сильно ...
Read more

Larisa Bondareva | VK

Письмо «Только не бойся... ... «Если бы я могла написать это письмо ... которая много ...
Read more

Valentina Stepanova | VK

Письмо «Только не бойся... ... «Если бы я могла написать это ... (имеются фото и данные ...
Read more