From 6d7ffd4cb79afb60561b9c56066fcaca448a91d7 Mon Sep 17 00:00:00 2001 From: max-barabash <48650035+max-barabash@users.noreply.github.com> Date: Sun, 17 Mar 2019 23:16:04 +0400 Subject: [PATCH 1/3] Add index.html to repository --- index.html | 244 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 244 insertions(+) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..00a1936 --- /dev/null +++ b/index.html @@ -0,0 +1,244 @@ + + + + + Право.ru: Блог от Барабаша Масима Сергеевича + + +

Блог компании Pravo.ru

+

КАК МЫ ИЗМЕРЯЕМ СКОРОСТЬ ЗАГРУЗКИ И УЛУЧШАЕМ ЕЁ

+

+ Если ваш сайт медленно грузится, вы рискуете тем, что люди не оценят ни то,
+ какой он красивый, ни то, какой он удобный. Никому не понравится, когда все
+ тормозит. Мы регулярно добавляем в Doc.One новую функциональность,
+ иногда — исправляем ошибки, а это значит, у нас постоянно появляются новый код
+ и новая логика. Всё это напрямую влияет на скорость работы интерфейса. +

+

Что мы измеряем

+ + +
+

+ —Ок, теперь у нас есть метрики, мы можем отправить их на сервер - говорим мы +

+

+ —Что же дальше? - вопрошаете вы +

+

+ —А давай построим график! - отвечаем мы +

+

+ —А что будем считать? - уточняете вы +

+
+

+ Как вы знаете, медиана – это серединное, а не среднее значение в выборке.
+ Если у нас имеются числа 1, 2, 2, 3, 8, 10, 20, то медиана – 3, а среднее – 6,5.
+ В общем случае медиана отлично показывает, сколько грузится средний пользователь. +

+

+ В случае ускорения или замедления медиана, конечно, изменится. Но она не может
+ рассказать, сколько пользователей ускорилось, а сколько замедлилось. +

+

+ APDEX – метрика, которая сразу говорит: хорошо или плохо. Метрика
+ работает очень просто. Мы выбираем временной интервал [0; t], такой, что если
+ время показа страницы попало в него, то пользователь счастлив. Берем еще один
+ интервал, (t; 4t] (в четыре раза больше первого), и считаем, что если страница
+ показана за это время, то пользователь в целом удовлетворен скоростью работы,
+ но уже не настолько счастлив. И применяем формулу: +

+
+ +
Image with math formula
+
+

+ Получается значение от нуля до единицы, которое, видимо, лучше всего показывает,
+ хорошо или плохо работает почта. +

+

+ Как мы измеряем +

+

+ Сейчас модуль обновления сам логирует все свои стадии, и можно легко понять
+ причину замедления: медленнее стал отвечать сервер либо слишком долго
+ выполняется JavaScript. Выглядит это примерно так: +

+ + this.timings['look-ma-im-start'] = Date.now();
+ this.timings['look-ma-finish'] = Date.now(); +
+

+ C помощью Date.now()> мы получаем текущее время. Все тайминги собираются и при
+ отправке рассчитываются. На этапах разница между “end” и “start” не считается,
+ а все вычисления производятся в конце: +

+ var totalTime = this.timings['look-ma-finish'] - this.timings['look-ma-im-start']; +

И на сервер прилетают подобные записи:

+ serverResponse=50&domUpdate=60 +

Как мы ускоряем

+

+ Чтобы снизить время загрузки почты при выходе новых версий,
+ мы уже делаем следующее: +

+ +

+ Мы подумали: А что если хранить где-то старую версию файлов, а при выходе новой
+ передавать только diff между ней и той, которая сохранена у пользователя?»
+ В браузере же останется просто наложить патч на клиенте. +

+

+ На самое деле эта идея не нова. Уже существуют стандарты для HTTP — например,
+ RFC 3229 «Delta encoding in HTTP» и «Google SDHC», — но по разным причинам они
+ не получили должного распространения в браузерах и на серверах. +

+

+ Мы же решили сделать свой аналог на JS. Чтобы реализовать этот метод обновления,
+ начали искать реализации diff на JS. На популярных хостингах кода нашли
+ библиотеки: +

+ +

Для окончательного выбора библиотеки нам нужно сравнить:

+ + + + + + + + + + + + + + + + +
БиблиотекаIE9Opera 12
vcdiff85
google diff136376
+

+ После того как мы определились с библиотекой для диффа, нужно определиться с тем,
+ где и как хранить статику на клиенте. +

+

+ Формат файла с патчами для проекта выглядит так: +

+ +
+            [
+                {
+                    "k": "jane.css",
+                    "p": [patch],
+                    "s": 4554
+                },
+                {
+                    "k": "jane.css",
+                    "p": [patch],
+                    "s": 4554
+                }
+            ]
+        
+
+

+ То есть это обычный массив из объектов. Каждый объект — отдельный ресурс. У
+ каждого объекта есть три свойства. k — названия ключа в localStorage для этого
+ ресурса. p — патч для ресурса, который сгенерировал vcdiff. s — чексумма для
+ ресурса актуальной версии, чтобы потом можно было проверить правильность
+ наложения патча на клиенте. Чексумма вычисляется по алгоритму Флетчера.
+

+

+ Алгоритм Бройдена — Флетчера — Гольдфарба — Шанно (BFGS)
+ — итерационный метод численной оптимизации, предназначенный для
+ нахождения локального максимума/минимума нелинейного функционала
+ без ограничений. +

+

Почему именно алгоритм Флетчера, а не другие популярные алгоритмы вроде:

+ +

+ Потому что он быстрый, компактный и легок в реализации. +

+

Итог

+

Фактически мы экономим 80-90% трафика. Размер загружаемой статитки в байтах:

+ + + + + + + + + + + + + + + + + + + + + +
РелизС патчемБез патча
7.7.20397174 549
7.7.2138353 995
7.7.224833 995
+

Комментарии

+
+
+ - Mogaika (mogaika@pravo.ru) 30 ноября 2014 в 17:05 +

+ А можете привести сравнение, на сколько быстрее грузится lite версия? +

+
+
+ - JIguse (mrawesome@pravo.ru) 29 ноября 2014 в 21:30 +

+ Спасибо за статью, познавательно. Здорово, что Pravo.ru делится некоторыми
+ подробностями о внутренней работе сервисов. +

+
+
+ - Brister (brist89@pravo.ru) 24 ноября 2014 в 13:13 +

+

(кол-во счастливых пользователей + кол-во удовлетворенных / 2) / (кол-во всех).
+ Получается значение от нуля до единицы, которое, видимо, лучше всего показывает,
+ хорошо или плохо работает почта. +

+
+
+ + + \ No newline at end of file From 2a033a432c3155aa06a6a85689dd1caf135db125 Mon Sep 17 00:00:00 2001 From: max-barabash <48650035+max-barabash@users.noreply.github.com> Date: Sun, 17 Mar 2019 23:19:50 +0400 Subject: [PATCH 2/3] Changed default language of document --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 00a1936..3a4e377 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + Право.ru: Блог от Барабаша Масима Сергеевича @@ -241,4 +241,4 @@

Комментарии

Компания: Pravo.ru
- \ No newline at end of file + From 42c21eef4227fda75bfb317d8bc07b8097d8c54c Mon Sep 17 00:00:00 2001 From: max-barabash <48650035+max-barabash@users.noreply.github.com> Date: Mon, 18 Mar 2019 20:50:01 +0400 Subject: [PATCH 3/3] Add tag & update content in tag
--- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 3a4e377..6fafa3f 100644 --- a/index.html +++ b/index.html @@ -62,8 +62,8 @@

Что мы измеряем

но уже не настолько счастлив. И применяем формулу:

- -
Image with math formula
+ (кол-во счастливых пользователей + кол-во удовлетворенных / 2) / (кол-во всех) +
Количество довольных пользователей

Получается значение от нуля до единицы, которое, видимо, лучше всего показывает,