Проектирование высоконагруженны

х систем

Лекция №3

Быков Александр

2

HighLoad. Лекция №3

Скорость генерации страниц на сервере важна до определенного предела (server side)

Дальше большую часть видимой задержки занимает работа браузера а не сервера (client side)

Некоторые функции протокола HTTP можно использовать для уменьшения нагрузки на сервер

Frontend оптимизация

3

HighLoad. Лекция №3

Делать меньше запросов Принудительно кешировать статику Сжимать данные gzip Использовать keep-alive Избегать ненужных редиректов Минимизировать кол-во запросов к DNS Минимизировать кол-во ресурсов Выносить долгие запросы в AJAX

Основные правила оптимизации

4

HighLoad. Лекция №3

Firefox: Firebug add-on Chrome: Developer Tools Safari: Web Inspector IE: Developer Tools Opera: Dragonfly

Диаграмма загрузки страницы

5

HighLoad. Лекция №3

Главная страница Yandex

6

HighLoad. Лекция №3

7

HighLoad. Лекция №3

Большая часть ресурсов берется из кеша Рендеринг дольше чем серверное время

Повторная загрузка

8

HighLoad. Лекция №3

9

HighLoad. Лекция №3

Указываем заголовки Expires и Cache-Control Необходимо указание заголовка Date Браузер в течение этого времен не запрашивает

ресурс По Ctrl+R запрашивает с заголовком If-Modified-

Since Небольшой размер кеша в браузерах

(FF: 350 Мб, Chrome: 320 Мб, IE: 250 Мб, Opera: 50Мб)

Кеширование статики

10

HighLoad. Лекция №3

11

HighLoad. Лекция №3

Выдаем файл с Expires в вечность При изменении файла заливаем его с другим именем

Настройка на сервере (nginx)

nginx.conf: location /b { expires max; alias /usr/local/www/static; }

Response Headers:Cache-Control: max-age=315360000Expires: Thu, 31 Dec 2037 23:55:55 GMTDate: Fri, 28 Feb 2014 18:46:18 GMT

12

HighLoad. Лекция №3

Указываем Expires в прошлом Либо указываем Cache-Control: no-cache Браузер перестает кешировать страницу совсем

Запрет кеширования динамики

13

HighLoad. Лекция №3

Применение: Для получения свежих данных из приложения Для точного подсчета статики (cache-buster)

Настройка на сервере (nginx)

nginx.conf:location /d { add_header Cache-Control "private, no-cache, no-store";}

Response Headers:Cache-Control: private, no-cache, no-store

14

HighLoad. Лекция №3

Conditional GET

Request:GET /i/www/logo.png HTTP/1.1Accept-Encoding: gzip,deflateConnection: keep-aliveHost: img.yandex.netIf-Modified-Since: Mon, 26 Apr 2010 08:00:35 GMTUser-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 ModifiedCache-Control: max-age=315360000Connection: keep-aliveDate: Fri, 28 Sep 2012 20:56:12 GMTExpires: Thu, 31 Dec 2037 23:55:55 GMTLast-Modified: Mon, 26 Apr 2010 08:00:35 GMTServer: nginx

15

HighLoad. Лекция №3

Уменьшается объем передаваемых данных Значительная нагрузка на CPU Дополнительная задержка при не потоковом

сжатии

gzip (deflate) – сжатие на лету

nginx.conf:http { gzip on; ...} Response Headers:Content-Encoding: gzip

16

HighLoad. Лекция №3

Ищет на диске рядом сжатую версию файла Не подходит для динамического содержимого

gzip (deflate) – предварительное сжатие

nginx.conf:http { gzip_static on; ...} Response Headers:Content-Encoding: gzip

17

HighLoad. Лекция №3

Можно начать передачу не зная конечную длину При скачивании файлов клиент не покажет ETA

chunked encoding

Response Headers:Transfer-Encoding: chunked

Response Headers:Content-Length: 42432

18

HighLoad. Лекция №3

Применение: 301 – перенаправление с других имен сайта 302 – подсчет статистик по переходам

HTTP redirect

GET / HTTP/1.1Host: www.mail.ru

Response Headers:HTTP/1.1 301 Moved PermanentlyLocation: http://mail.ru/

HTTP/1.1 302 Moved TemporarilyLocation: http://mail.ru/

19

HighLoad. Лекция №3

Повторное использование разогретых соединений

Много соединений – большая нагрузка на сервер

HTTP keep-alive

nginx.conf:http { keepalive_timeout 60; ...} Response Headers:Connection: keep-alive

20

HighLoad. Лекция №3

Инструмент для построения диаграммы загрузки

Позволяет построить Connection view

webpagetest.org

21

HighLoad. Лекция №3

22

HighLoad. Лекция №3

23

HighLoad. Лекция №3

CSS Sprites

24

HighLoad. Лекция №3

Inline images

JavaScript:i = new Image();i.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==”;

CSS:background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAKJJREFUeNrMVIsOhSAI7aDd///eXvQYNmdI1Gy7bGeQKR4OFJi5a2nUNbbmCSFoZtF5aW78VxpCkQZvNISzZP6cITmagALWXpMhDGngZYgbjW9ZkqMRtZLVOBgb0zo9mYZQYQlnwkvSoJRTS2aNzfk+PhgR1/cdK+woey4lWZRY/dtoZZWejbHhlPAnzYmZT2u9IMihecMo2ONhwyTx4VcBBgCpVBSNAzaJLAAAAABJRU5ErkJggg==")

25

HighLoad. Лекция №3

Уменьшает кол-во запросов Файлы быстрее скачиваются Файлы быстрее выполняются Файлы меньше блокируют рендеринг

Склейка JS и CSS

26

HighLoad. Лекция №3

Лимит: 20 в <=IE7, 50 в остальных браузерах Лимит: до 4 Кб на общий размер в запросе Веб-сервер может отбросить слишком длинный

запрос Альтернативы: Flash storage, HTML5 local storage

Cookies

27

HighLoad. Лекция №3

Так работают веб-счетчики и рекламные системы Запрещены в Safari (Mac OS X, iOS) Есть локальные проблемы в отдельных браузерах

3rd party cookiesnginx.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

28

HighLoad. Лекция №3

Позволяет обновлять части страницы без полной перезагрузки

Медленные или ненадежные запросы можно вызывать AJAX-ом с быстрой и надежной страницы

Позволяет заметно экономить на компиляции JS и CSS

AJAX

29

HighLoad. Лекция №3

High Performance Web Siteshttp://stevesouders.com/blog/

Even Faster Web Sites:Performance Best Practices for WebISBN: 978-0-596-52230-8

High Performance Web Sites:Essential Knowledge for Front-End EngineersISBN: 978-0-596-52930-7

Литература

СПАСИБО ЗА ВНИМАНИЕ

Быков Александр

bykov@corp.mail.ru