highload осень 2012 лекция 3
DESCRIPTION
TRANSCRIPT
Проектирование ПО для высоконагруженных систем
Лекция №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/
Спасибо за вниманиеАлександр Быков