Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Работа со статикой в
Badoo
Юрий Насретдинов, разработчик
Badoo
• 205+ млн пользователей
• PHP-FPM: 40+ тыс запросов в сек
• 300 тыс регистраций в день
• 5 млн фото / видео в день
...
«Статика» в Badoo
• Статика — JS / CSS / картинки (фотографии
пользователей хранятся отдельно)
• 100 Мб статики в репозито...
Версионирование
• Не версионировать:

- полагаться на If-Modified-Since, E-Tag, …
• У всех файлов одна и та же версия:

- п...
Нет версионирования
• У всех файлов нет версий и они всегда
запрашиваются по одному и тому же URL
• Браузеры очень кеширую...
Одна версия у всех файлов
• Удобно: не требуется думать о версиях
файлов в CSS / JS
• Надежно: не требуется анализировать
...
Пофайловая версионность
• Маркеры version(filename) — явное
версионирование файлов в CSS/JS
• Цепочка зависимостей:

- A ->...
Devel-окружение
• Статика отдается через PHP и
собирается «на лету»
• URL без version(…) отдают 404
• Переключатели:

- вк...
Deploy
• PHP-скрипт по обработке и загрузке файлов
• Карты:

- [filename => contents_md5]

- [filename => version]
• Порядок...
Дополнительные возможности
• Автоматическая генерация RTL-версии в
CSS
• Поддержка «include path» — можно
писать include и...
Пример
// something.js
!
#include "funcs.js"
#include "virtual:config.phtml"
!
var el = document
.createElement('script');...
Пример
// something.css
#include "head.css"
!
.mydiv {
background:
url(version(i.png));
float: left;
}
Пример (RTL-версия)
// something.css
#include "head.css"
!
.mydiv {
background:
url(version(i.png));
float: right;
}
До: После:
До: После:
Спасибо за внимание!
Вопросы.
Юрий Насретдинов
http://habrahabr.ru/users/yourock/
y.nasretdinov@corp.badoo.com
Upcoming SlideShare
Loading in …5
×

2

Share

Download to read offline

Доклад Юрия Насретдинова на MoscowJS Meetup. "Как мы начали работать со статикой (js/css/img) и уменьшили трафик на наш CDN в три раза"

Download to read offline

Два года назад мы начали активно развивать нашу деплой-систему, и довольно быстро начали релизить код два раза в день. При этом обнаружилась проблема: мы всегда генерирали новую версию для всех статических файлов (js/css/img), что заставляло пользователей загружать заново всю «статику» при каждом деплое. Чтобы ускорить отдачу статики пользователям, мы перешли на пофайловое версионирование статических файлов и смогли сократить трафик на наши CDN-сервера в 3 раза (примерно до 500 Мбит/сек). Расскажем о том как мы это сделали.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Доклад Юрия Насретдинова на MoscowJS Meetup. "Как мы начали работать со статикой (js/css/img) и уменьшили трафик на наш CDN в три раза"

  1. 1. Работа со статикой в Badoo Юрий Насретдинов, разработчик
  2. 2. Badoo • 205+ млн пользователей • PHP-FPM: 40+ тыс запросов в сек • 300 тыс регистраций в день • 5 млн фото / видео в день • 50 языков интерфейса • 2 000+ серверов
  3. 3. «Статика» в Badoo • Статика — JS / CSS / картинки (фотографии пользователей хранятся отдельно) • 100 Мб статики в репозитории • SSI includes • Кросс-зависимости: JS подгружает JS и CSS • Deploy 2 раза в день
  4. 4. Версионирование • Не версионировать:
 - полагаться на If-Modified-Since, E-Tag, … • У всех файлов одна и та же версия:
 - при деплое рост трафика в 2 раза
 - полная инвалидация кеша клиента • У каждого файла своя версия:
 - загружаются только изменения
  5. 5. Нет версионирования • У всех файлов нет версий и они всегда запрашиваются по одному и тому же URL • Браузеры очень кешируют статику • Прокси-серверы кешируют статику • Во время деплоя часть файлов может обновиться, а часть — нет • Пользователи обычно не жмут Ctrl+F5
  6. 6. Одна версия у всех файлов • Удобно: не требуется думать о версиях файлов в CSS / JS • Надежно: не требуется анализировать зависимости, состояние всегда согласовано • Неэффективное использование кеша клиента — при деплое весь кеш инвалидируется
  7. 7. Пофайловая версионность • Маркеры version(filename) — явное версионирование файлов в CSS/JS • Цепочка зависимостей:
 - A -> B -> C
 - поменялся A, нужно дать новую версию B и C • Сложно следить за согласованностью версий
  8. 8. Devel-окружение • Статика отдается через PHP и собирается «на лету» • URL без version(…) отдают 404 • Переключатели:
 - включение сжатия
 - отключение debug-строк
 - (CSS only) замена #include на @import
  9. 9. Deploy • PHP-скрипт по обработке и загрузке файлов • Карты:
 - [filename => contents_md5]
 - [filename => version] • Порядок действий:
 - составляем зависимости [filename => […]]
 - находим изменившиеся файлы
 - перегенерируем изменившиеся файлы и их зависимости
  10. 10. Дополнительные возможности • Автоматическая генерация RTL-версии в CSS • Поддержка «include path» — можно писать include и URL до файлов с точностью до директории • Include path — список директорий, в которых ищется файл; просматривается по порядку
  11. 11. Пример // something.js ! #include "funcs.js" #include "virtual:config.phtml" ! var el = document .createElement('script'); ! el.src = 'version(app.js)';
  12. 12. Пример // something.css #include "head.css" ! .mydiv { background: url(version(i.png)); float: left; }
  13. 13. Пример (RTL-версия) // something.css #include "head.css" ! .mydiv { background: url(version(i.png)); float: right; }
  14. 14. До: После:
  15. 15. До: После:
  16. 16. Спасибо за внимание! Вопросы. Юрий Насретдинов http://habrahabr.ru/users/yourock/ y.nasretdinov@corp.badoo.com
  • dizzy2

    Dec. 18, 2014
  • PavelDemyanenko

    Apr. 23, 2014

Два года назад мы начали активно развивать нашу деплой-систему, и довольно быстро начали релизить код два раза в день. При этом обнаружилась проблема: мы всегда генерирали новую версию для всех статических файлов (js/css/img), что заставляло пользователей загружать заново всю «статику» при каждом деплое. Чтобы ускорить отдачу статики пользователям, мы перешли на пофайловое версионирование статических файлов и смогли сократить трафик на наши CDN-сервера в 3 раза (примерно до 500 Мбит/сек). Расскажем о том как мы это сделали.

Views

Total views

1,140

On Slideshare

0

From embeds

0

Number of embeds

39

Actions

Downloads

4

Shares

0

Comments

0

Likes

2

×