1. Проектирование
высоконагруженных
систем
Лекция №3
Быков Александр

2. HighLoad. Лекция №3
Frontend оптимизация
 Скорость генерации страниц на сервере важна до
определенного предела (server side)
 Дальше большую часть видимой задержки занимает
работа браузера а не сервера (client side)
 Некоторые функции протокола HTTP можно
использовать для уменьшения нагрузки на сервер
2

3. HighLoad. Лекция №3
Основные правила оптимизации
 Делать меньше запросов
 Принудительно кешировать статику
 Сжимать данные gzip
 Использовать keep-alive
 Избегать ненужных редиректов
 Минимизировать кол-во запросов к DNS
 Минимизировать кол-во ресурсов
 Выносить долгие запросы в AJAX
3

4. HighLoad. Лекция №3
Диаграмма загрузки страницы
 Firefox: Firebug add-on
 Chrome: Developer Tools
 Safari: Web Inspector
 IE: Developer Tools
 Opera: Dragonfly
4

5. HighLoad. Лекция №3
Главная страница Yandex
5

6. HighLoad. Лекция №3
6

7. HighLoad. Лекция №3
Повторная загрузка
 Большая часть ресурсов берется из кеша
 Рендеринг дольше чем серверное время
7

8. HighLoad. Лекция №3
8

9. HighLoad. Лекция №3
Кеширование статики
 Указываем заголовки Expires и Cache-Control
 Необходимо указание заголовка Date
 Браузер в течение этого времен не запрашивает ресурс
 По Ctrl+R запрашивает с заголовком If-Modified-Since
 Небольшой размер кеша в браузерах
(FF: 350 Мб, Chrome: 320 Мб, IE: 250 Мб, Opera: 50Мб)
9

10. HighLoad. Лекция №3
10

11. HighLoad. Лекция №3
Настройка на сервере (nginx)
nginx.conf:
location /b {
expires max;
alias /usr/local/www/static;
}
Response Headers:
Cache-Control: max-age=315360000
Expires: Thu, 31 Dec 2037 23:55:55 GMT
Date: Fri, 28 Feb 2014 18:46:18 GMT
 Выдаем файл с Expires в вечность
 При изменении файла заливаем его с другим именем
11

12. HighLoad. Лекция №3
Запрет кеширования динамики
 Указываем Expires в прошлом
 Либо указываем Cache-Control: no-cache
 Браузер перестает кешировать страницу совсем
12

13. HighLoad. Лекция №3
Настройка на сервере (nginx)
nginx.conf:
location /d {
add_header Cache-Control "private, no-cache, no-store";
}
Response Headers:
Cache-Control: private, no-cache, no-store
Применение:
 Для получения свежих данных из приложения
 Для точного подсчета статики (cache-buster)
13

14. HighLoad. Лекция №3
Conditional GET
Request:
GET /i/www/logo.png HTTP/1.1
Accept-Encoding: gzip,deflate
Connection: keep-alive
Host: img.yandex.net
If-Modified-Since: Mon, 26 Apr 2010 08:00:35 GMT
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/537.4
(KHTML, like Gecko) Chrome/22.0.1229.79 Safari/537.4
Response:
304 Not Modified
Cache-Control: max-age=315360000
Connection: keep-alive
Date: Fri, 28 Sep 2012 20:56:12 GMT
Expires: Thu, 31 Dec 2037 23:55:55 GMT
Last-Modified: Mon, 26 Apr 2010 08:00:35 GMT
Server: nginx
14

15. HighLoad. Лекция №3
gzip (deflate) – сжатие на лету
nginx.conf:
http {
gzip on;
...
}
Response Headers:
Content-Encoding: gzip
 Уменьшается объем передаваемых данных
 Значительная нагрузка на CPU
 Дополнительная задержка при не потоковом сжатии
15

16. HighLoad. Лекция №3
gzip (deflate) – предварительное сжатие
nginx.conf:
http {
gzip_static on;
...
}
Response Headers:
Content-Encoding: gzip
 Ищет на диске рядом сжатую версию файла
 Не подходит для динамического содержимого
16

17. HighLoad. Лекция №3
chunked encoding
Response Headers:
Transfer-Encoding: chunked
Response Headers:
Content-Length: 42432
 Можно начать передачу не зная конечную длину
 При скачивании файлов клиент не покажет ETA
17

18. HighLoad. Лекция №3
HTTP redirect
GET / HTTP/1.1
Host: www.mail.ru
Response Headers:
HTTP/1.1 301 Moved Permanently
Location: http://mail.ru/
HTTP/1.1 302 Moved Temporarily
Location: http://mail.ru/
Применение:
 301 – перенаправление с других имен сайта
 302 – подсчет статистик по переходам
18

19. HighLoad. Лекция №3
HTTP keep-alive
nginx.conf:
http {
keepalive_timeout 60;
...
}
Response Headers:
Connection: keep-alive
 Повторное использование разогретых соединений
 Много соединений – большая нагрузка на сервер
19

20. HighLoad. Лекция №3
webpagetest.org
 Инструмент для построения диаграммы загрузки
 Позволяет построить Connection view
20

21. HighLoad. Лекция №3
21

22. HighLoad. Лекция №3
22

23. HighLoad. Лекция №3
CSS Sprites
23

24. HighLoad. Лекция №3
Inline images
JavaScript:
i = new Image();
i.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACA
UwAOw==”;
CSS:
background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAA
UCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllP
AAAAKJJREFUeNrMVIsOhSAI7aDd///eXvQYNmdI1Gy7bGeQKR4OFJi5a2nUNbbmC
SFoZtF5aW78VxpCkQZvNISzZP6cITmagALWXpMhDGngZYgbjW9ZkqMRtZLVOBgb0
zo9mYZQYQlnwkvSoJRTS2aNzfk+PhgR1/cdK+woey4lWZRY/dtoZZWejbHhlPAnzYm
ZT2u9IMihecMo2ONhwyTx4VcBBgCpVBSNAzaJLAAAAABJRU5ErkJggg==")
24

25. HighLoad. Лекция №3
Склейка JS и CSS
 Уменьшает кол-во запросов
 Файлы быстрее скачиваются
 Файлы быстрее выполняются
 Файлы меньше блокируют рендеринг
25

26. HighLoad. Лекция №3
Cookies
 Лимит: 20 в <=IE7, 50 в остальных браузерах
 Лимит: до 4 Кб на общий размер в запросе
 Веб-сервер может отбросить слишком длинный запрос
 Альтернативы: Flash storage, HTML5 local storage
26

27. HighLoad. Лекция №3
3rd party cookies
nginx.conf:
location /w3c/p3p.xml {}
location /w3c/policy.xml {}
add_header P3P "policyref="/w3c/p3p.xml", CP="NOI DSP COR NID PSAo PSDo
OUR BUS UNI NAV STA INT"";
Response Headers:
P3P: policyref="/w3c/p3p.xml", CP="NOI DSP COR NID PSAo PSDo OUR BUS UNI
NAV STA INT
 Так работают веб-счетчики и рекламные системы
 Запрещены в Safari (Mac OS X, iOS)
 Есть локальные проблемы в отдельных браузерах
27

28. HighLoad. Лекция №3
AJAX
 Позволяет обновлять части страницы без полной
перезагрузки
 Медленные или ненадежные запросы можно вызывать
AJAX-ом с быстрой и надежной страницы
 Позволяет заметно экономить на компиляции JS и CSS
28

29. HighLoad. Лекция №3
Литература
 High Performance Web Sites
http://stevesouders.com/blog/
 Even Faster Web Sites:
Performance Best Practices for Web
ISBN: 978-0-596-52230-8
 High Performance Web Sites:
Essential Knowledge for Front-End Engineers
ISBN: 978-0-596-52930-7
29

30. СПАСИБО ЗА ВНИМАНИЕ
Быков Александр
bykov@corp.mail.ru