Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

1

Реалтайм  статистика  скорости  работы  
нативных  и  веб-­приложений  у  
реальных  пользователей
Pavel  Dovbush
@

2

RUM
Real  User  Monitoring
Реальный  UX

3

● DOMContentLoaded,  onLoad
● W3C Navigation  Timing
● W3C    Resource    Timing
● W3C User            Timing
● Нативные  приложения
Что

4

W3C  Navigation  Timing

5

W3C  Resource  Timing

6

Load  time  -­ 32s

7

UX  vs.  onLoad
source

8

Что  такое  UX?
VS.

9

● performance.mark(name)
● performance.measure(name,  mark1,  mark2)
W3C  User  Timing

10

WebSite  hit

11

WebApp  hit

12

Android  hit

13

Как  собрать  данные?
Специализированные
Всё-­в-­одном

14

Собираем  сами
WEB  
cluster
Хранилищ
е
Графики
Приложение

15

github.com/dpp-­name/jinba
tiny.cc/jinba
Jinba

16

● Микро-­библиотека
○ JavaScript
○ Android
○ iOS
○ Windows  phone
● Набор  соглашений
● Инфраструктура
○ Сбор
○ Визуализация
○ Аналитика
Jinba

17

npm  install  jinba-­js-­client
var  Jinba  =  require('jinba-­js-­client');;
var  r  =  new  Jinba.Request(location.pathname,  
{  app_label:  'example'  });;
r.startMeasurement('some-­id',  'init');;
doInit(function  callback()  {
r.stopMeasurement('some-­id');;
});;
r.end();;
Пример

18

[  {  name:  '/',
value:  321,
tags:  {  app_label:  'example',  errorStatus:  0  },
measurements:
[  {  name:  'init',  value:  275  },
….
{  name:  'foo-­1',  value:  0  },
{  name:  'bar-­2',  value:  17  },
….
Данные

19

● Отфильтровать  мусор
● Защита  от  паразитного  трафика
● Записать  в  хранилище
● Как  можно  быстрее!
Прием  данных

20

● Быстрая  вставка
● Разные  “срезы”
● Возможность  считать  персентили
● Хранить  данные  годами
Требования  к  хранилищу

21

● MySQL
● Syslog
● Hadoop
● InfluxDB
● StatsD
Хранилище

22

● MySQL  engine
● Данные  в  памяти  (за  N  минут)
● UDP  вставка
● Отчеты  по  тэгам
● Реалтайм!
pinba.org

23

● tagN_info  -­ отчеты  по  многим  тэгам
● Персентили
● Гистограммы
● Фильтрация  по  тегам  реквеста
Pinba  для  Jinba

24

Pinba
1.4M
25K
RPS
TPS

25

CREATE  TABLE  v2_jinba_country  (
...
)  ENGINE=PINBA  
COMMENT='tagN_info:timer,mode,country::75,95';;
pinbaSchema.createReport({
mysqlClient:  mysqlClient,
tablePrefix:  'v2_jinba',
name:  'country',
tags:  ['timer',  'mode',  'country']
});;
Создание  отчета

26

mysql>  desc  v2_jinba_country;
+-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐+-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐+
|  Field                |  Type                  |
+-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐+-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐+
|  timer |  varchar(64)    |
|  mode |  varchar(64)    |
|  country |  varchar(64)    |
|  req_count        |  int(11)            |
|  req_per_sec    |  float                |
|  hit_count        |  int(11)            |
|  hit_per_sec    |  float                |
|  timer_value    |  float                |
|  timer_median  |  float                |
|  index_value    |  varchar(256)  |
|  p75                    |  float                |
|  p95                    |  float                |
+-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐+-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐+
Создание  отчета

27

mysql>  select  timer,  mode,  hit_per_sec,
timer_value/hit_count  as  timer_avg,  timer_median,  p75,  p95
from  v2_jinba  where  mode='webapp-­‐badoo'  and  timer='usable' G
***************************  1.  row  ***************************
timer:  usable
mode:  webapp-­‐badoo
hit_per_sec:   739.025
timer_avg:  0.898577200534488
timer_median:   0.589789
p75:  0.854372
p95:  2.18598
Создание  отчета

28

Гистограмма
%  of  hits
time

29

● Pinba  -­ последние  5-­10-­15  минут
● История  -­ RRD  в  перспективе  InfluxDB
Хранение  истории

30

pinba2influxdb
createDB(influxClient,  dbName)
selectData(mysqlClient,  dbName,  tags)
insertData(influxClient,  dbName,  result)
InfluxDB

31

Как  рисовать?

32

grafanaUtils
createReportDashboard(url,   grafanaKey,  schema,  name)
"domain_country":  {
"rows_by":  "timer",
"tags":  [
"mode",
"timer",
"domain",
"country"
]  }
Grafana

33

Как  рисовать?

34

Что  получилось
➔ JinbaClient
➔ JinbaServer
➔ Pinba
➔ JinbaScripts
➔ InfluxDB
➔ Grafana

35

● Тип  запроса
● Таймер
● Страница  /  Экран
● Страна
● Браузер  /  Устройство
Аналитика

36

● Тип  запроса
● Таймер
● Страница  /  Экран
● Страна
● Браузер  /  Устройство
Аналитика
9
31
40
50
10
5.5  M

37

WebSite

38

WebApp

39

Android

40

Среднее  и  персентили

41

Результаты  оптимизации

42

Последствия  редизайна

43

Сравнение  стран

44

Сравнение  браузеров

45

Сравнение  страниц

46

● Только  вы  можете  определить  `usable`
● Юзабилити  важнее  технических  метрик
● Не  смешивайте  типы  запросов
● Выделяйте  общие  группы
● Персентили,  а  не  среднее
Итого

47

Павел  Довбуш
<dpp@dpp.su>
https://github.com/dpp-­name/jinba
Вопросы?

More Related Content

Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей / Павел Довбуш