Проектирование ПО для высоконагруженных систем

Лекция №3

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

Лекция 3

Протокол HTTP и Frontend-оптимизация

• Оптимизация серверного кода и ускорение генерации страниц важны до определенных пределов

• Дальнейшее ускорение работы сервера никак не влияет на user-experience

• В видимой пользователем задержке большую часть занимает работа браузера

• Также особенности браузера можно использовать чтобы избежать ненужной нагрузки

Лекция 3

Некоторые правила веб-оптимизации

• Делать меньше запросов

• Принудительно кешировать статику

• Сжимать данные gzip

• Использовать keep-alive

• Избегать ненужных редиректов

• Минимизировать кол-во запросов к DNS

• Минимизировать кол-во файлов скриптов и

CSS

• Выносить долгие запросы в AJAX или iframe

Лекция 3

Лекция 3

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

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

Лекция 3

Лекция 3

Лекция 3

Кеширование

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

Response Headers:Cache-Control: max-age=604800Expires: Fri, 05 Oct 2012 18:46:18 GMTDate: Fri, 28 Sep 2012 18:46:18 GMT

• Выдаем файл с Expires в вечность (год)

• При изменении файла меняем имя и кладем

рядом

Лекция 3

Анти-кеш

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

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

• Для точного подсчета статистик

• Для получения свежих данных из приложения

Лекция 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

Лекция 3

Редиректы

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

Response Headers:Location: http://mail.ru/

• 301 - Перенаправление со других имен сайта

• 302 - Подсчет статистик по переходам между

страницами

Лекция 3

CSS Спрайты

Лекция 3

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

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

Лекция 3

Склейка JS и CSS

• Уменьшает кол-во запросов

• Файлы быстрее скачиваются

• Файлы быстрее выполняются

• Файлы меньше блокируют рендеринг страницы

• Дублированный код компилируется 2 раза

Лекция 3

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

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

• Большая нагрузка на сервер - много соединений

Лекция 3

Лекция 3

Лекция 3

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

• Уменьшается объем передаваемых данных

• Дополнительная нагрузка на CPU

• Дополнительная задержка

Лекция 3

Chunked encodingResponse Headers:Transfer-Encoding: chunked

Response Headers:Content-Length: 42432

• Не надо ждать формирования документа чтобы начать

передачу

• Клиент не может показать пользователю ETA

Лекция 3

Cookies

• Позволяют делать stateless приложения

• Имеют ограниченный размер и возможности

• Добавляют +N байт к каждому запросу

• При правильном использовании сильно облегчают

жизнь

Лекция 3

Cookies

• Лимит: 20 в IE7 и ниже, 50 в остальных браузерах

• Лимит: до 4 Кб на общее кол-во

• Веб-сервер может отбросить слишком длинный

запрос

• Альтернативы: Flash storage, HTML5 local storage

Лекция 3

3-rd 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

• Так работают все веб-счетчики и рекламные системы

• Не работает в Safari (Mac OS X и iOS)

• Есть еще пара хитрых проблем

Лекция 3

AJAX

• Если нельзя ускорить сервер…

• Можно добавить асинхронность на клиенте

• Удобно при хождении в медленный сторонний сервис

Лекция 3

Домашнее чтение

High Performance Web Sites: Essential Knowledge for Front-End

Engineers

http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/

0596529309/

Even Faster Web Sites: Performance Best Practices for Web

Developers

http://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/

0596522304/

High Performance Web Sites

http://stevesouders.com/blog/

Спасибо за вниманиеАлександр Быков

bykov@corp.mail.ru