1. Работа со статикой в
Badoo
Юрий Насретдинов, разработчик

2. Badoo
• 205+ млн пользователей
• PHP-FPM: 40+ тыс запросов в сек
• 300 тыс регистраций в день
• 5 млн фото / видео в день
• 50 языков интерфейса
• 2 000+ серверов

3. «Статика» в Badoo
• Статика — JS / CSS / картинки (фотографии
пользователей хранятся отдельно)
• 100 Мб статики в репозитории
• SSI includes
• Кросс-зависимости: JS подгружает JS и
CSS
• Deploy 2 раза в день

4. Версионирование
• Не версионировать:
- полагаться на If-Modified-Since, E-Tag, …
• У всех файлов одна и та же версия:
- при деплое рост трафика в 2 раза
- полная инвалидация кеша клиента
• У каждого файла своя версия:
- загружаются только изменения

5. Нет версионирования
• У всех файлов нет версий и они всегда
запрашиваются по одному и тому же URL
• Браузеры очень кешируют статику
• Прокси-серверы кешируют статику
• Во время деплоя часть файлов может
обновиться, а часть — нет
• Пользователи обычно не жмут Ctrl+F5

6. Одна версия у всех файлов
• Удобно: не требуется думать о версиях
файлов в CSS / JS
• Надежно: не требуется анализировать
зависимости, состояние всегда
согласовано
• Неэффективное использование кеша
клиента — при деплое весь кеш
инвалидируется

7. Пофайловая версионность
• Маркеры version(filename) — явное
версионирование файлов в CSS/JS
• Цепочка зависимостей:
- A -> B -> C
- поменялся A, нужно дать новую версию
B и C
• Сложно следить за согласованностью
версий

8. Devel-окружение
• Статика отдается через PHP и
собирается «на лету»
• URL без version(…) отдают 404
• Переключатели:
- включение сжатия
- отключение debug-строк
- (CSS only) замена #include на @import

9. Deploy
• PHP-скрипт по обработке и загрузке файлов
• Карты:
- [filename => contents_md5]
- [filename => version]
• Порядок действий:
- составляем зависимости [filename => […]]
- находим изменившиеся файлы
- перегенерируем изменившиеся файлы и их
зависимости

10. Дополнительные возможности
• Автоматическая генерация RTL-версии в
CSS
• Поддержка «include path» — можно
писать include и URL до файлов с
точностью до директории
• Include path — список директорий, в
которых ищется файл; просматривается
по порядку

11. Пример
// something.js
!
#include "funcs.js"
#include "virtual:config.phtml"
!
var el = document
.createElement('script');
!
el.src = 'version(app.js)';

12. Пример
// something.css
#include "head.css"
!
.mydiv {
background:
url(version(i.png));
float: left;
}

13. Пример (RTL-версия)
// something.css
#include "head.css"
!
.mydiv {
background:
url(version(i.png));
float: right;
}

14. До: После:

15. До: После:

16. Спасибо за внимание!
Вопросы.
Юрий Насретдинов
http://habrahabr.ru/users/yourock/
y.nasretdinov@corp.badoo.com