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

Лекция №3

Быков Александр
HighLoad. Лекция №3

Frontend оптимизация
 Скорость генерации страниц на сервере важна до
определенного предела (server s...
HighLoad. Лекция №3

Основные правила оптимизации
 Делать меньше запросов
 Принудительно кешировать статику

 Сжимать д...
HighLoad. Лекция №3

Диаграмма загрузки страницы
 Firefox: Firebug add-on
 Chrome: Developer Tools

 Safari: Web Inspec...
HighLoad. Лекция №3

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

5
HighLoad. Лекция №3

6
HighLoad. Лекция №3

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

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

 Рендеринг дольше чем серверное время
...
HighLoad. Лекция №3

8
HighLoad. Лекция №3

Кеширование статики
 Указываем заголовки Expires и Cache-Control
 Необходимо указание заголовка Dat...
HighLoad. Лекция №3

10
HighLoad. Лекция №3

Настройка на сервере (nginx)
nginx.conf:
location /b {
expires max;
alias /usr/local/www/static;
}
Re...
HighLoad. Лекция №3

Запрет кеширования динамики
 Указываем Expires в прошлом
 Либо указываем Cache-Control: no-cache

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

Настройка на сервере (nginx)
nginx.conf:
location /d {
add_header Cache-Control "private, no-cache, n...
HighLoad. Лекция №3
Conditional GET
Request:
GET /i/www/logo.png HTTP/1.1
Accept-Encoding: gzip,deflate
Connection: keep-a...
HighLoad. Лекция №3
gzip (deflate) – сжатие на лету
nginx.conf:
http {
gzip on;
...
}
Response Headers:
Content-Encoding: ...
HighLoad. Лекция №3
gzip (deflate) – предварительное сжатие
nginx.conf:
http {
gzip_static on;
...
}
Response Headers:
Con...
HighLoad. Лекция №3
chunked encoding
Response Headers:
Transfer-Encoding: chunked

Response Headers:
Content-Length: 42432...
HighLoad. Лекция №3
HTTP redirect
GET / HTTP/1.1
Host: www.mail.ru

Response Headers:
HTTP/1.1 301 Moved Permanently
Locat...
HighLoad. Лекция №3
HTTP keep-alive
nginx.conf:
http {
keepalive_timeout 60;
...
}
Response Headers:
Connection: keep-aliv...
HighLoad. Лекция №3
webpagetest.org
 Инструмент для построения диаграммы загрузки
 Позволяет построить Connection view

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

21
HighLoad. Лекция №3

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

23
HighLoad. Лекция №3
Inline images
JavaScript:
i = new Image();
i.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAA...
HighLoad. Лекция №3

Склейка JS и CSS
 Уменьшает кол-во запросов
 Файлы быстрее скачиваются

 Файлы быстрее выполняются...
HighLoad. Лекция №3

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

 В...
HighLoad. Лекция №3

3rd party cookies
nginx.conf:
location /w3c/p3p.xml {}
location /w3c/policy.xml {}
add_header P3P "po...
HighLoad. Лекция №3

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

Литература
 High Performance Web Sites
http://stevesouders.com/blog/
 Even Faster Web Sites:
Perfor...
СПАСИБО ЗА ВНИМАНИЕ

Быков Александр
bykov@corp.mail.ru
Upcoming SlideShare
Loading in...5
×

HighLoad весна 2014 лекция 3

378

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
378
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HighLoad весна 2014 лекция 3

  1. 1. Проектирование высоконагруженных систем Лекция №3 Быков Александр
  2. 2. HighLoad. Лекция №3 Frontend оптимизация  Скорость генерации страниц на сервере важна до определенного предела (server side)  Дальше большую часть видимой задержки занимает работа браузера а не сервера (client side)  Некоторые функции протокола HTTP можно использовать для уменьшения нагрузки на сервер 2
  3. 3. HighLoad. Лекция №3 Основные правила оптимизации  Делать меньше запросов  Принудительно кешировать статику  Сжимать данные gzip  Использовать keep-alive  Избегать ненужных редиректов  Минимизировать кол-во запросов к DNS  Минимизировать кол-во ресурсов  Выносить долгие запросы в AJAX 3
  4. 4. HighLoad. Лекция №3 Диаграмма загрузки страницы  Firefox: Firebug add-on  Chrome: Developer Tools  Safari: Web Inspector  IE: Developer Tools  Opera: Dragonfly 4
  5. 5. HighLoad. Лекция №3 Главная страница Yandex 5
  6. 6. HighLoad. Лекция №3 6
  7. 7. HighLoad. Лекция №3 Повторная загрузка  Большая часть ресурсов берется из кеша  Рендеринг дольше чем серверное время 7
  8. 8. HighLoad. Лекция №3 8
  9. 9. HighLoad. Лекция №3 Кеширование статики  Указываем заголовки Expires и Cache-Control  Необходимо указание заголовка Date  Браузер в течение этого времен не запрашивает ресурс  По Ctrl+R запрашивает с заголовком If-Modified-Since  Небольшой размер кеша в браузерах (FF: 350 Мб, Chrome: 320 Мб, IE: 250 Мб, Opera: 50Мб) 9
  10. 10. HighLoad. Лекция №3 10
  11. 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. 12. HighLoad. Лекция №3 Запрет кеширования динамики  Указываем Expires в прошлом  Либо указываем Cache-Control: no-cache  Браузер перестает кешировать страницу совсем 12
  13. 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. 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. 15. HighLoad. Лекция №3 gzip (deflate) – сжатие на лету nginx.conf: http { gzip on; ... } Response Headers: Content-Encoding: gzip  Уменьшается объем передаваемых данных  Значительная нагрузка на CPU  Дополнительная задержка при не потоковом сжатии 15
  16. 16. HighLoad. Лекция №3 gzip (deflate) – предварительное сжатие nginx.conf: http { gzip_static on; ... } Response Headers: Content-Encoding: gzip  Ищет на диске рядом сжатую версию файла  Не подходит для динамического содержимого 16
  17. 17. HighLoad. Лекция №3 chunked encoding Response Headers: Transfer-Encoding: chunked Response Headers: Content-Length: 42432  Можно начать передачу не зная конечную длину  При скачивании файлов клиент не покажет ETA 17
  18. 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. 19. HighLoad. Лекция №3 HTTP keep-alive nginx.conf: http { keepalive_timeout 60; ... } Response Headers: Connection: keep-alive  Повторное использование разогретых соединений  Много соединений – большая нагрузка на сервер 19
  20. 20. HighLoad. Лекция №3 webpagetest.org  Инструмент для построения диаграммы загрузки  Позволяет построить Connection view 20
  21. 21. HighLoad. Лекция №3 21
  22. 22. HighLoad. Лекция №3 22
  23. 23. HighLoad. Лекция №3 CSS Sprites 23
  24. 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. 25. HighLoad. Лекция №3 Склейка JS и CSS  Уменьшает кол-во запросов  Файлы быстрее скачиваются  Файлы быстрее выполняются  Файлы меньше блокируют рендеринг 25
  26. 26. HighLoad. Лекция №3 Cookies  Лимит: 20 в <=IE7, 50 в остальных браузерах  Лимит: до 4 Кб на общий размер в запросе  Веб-сервер может отбросить слишком длинный запрос  Альтернативы: Flash storage, HTML5 local storage 26
  27. 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. 28. HighLoad. Лекция №3 AJAX  Позволяет обновлять части страницы без полной перезагрузки  Медленные или ненадежные запросы можно вызывать AJAX-ом с быстрой и надежной страницы  Позволяет заметно экономить на компиляции JS и CSS 28
  29. 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. 30. СПАСИБО ЗА ВНИМАНИЕ Быков Александр bykov@corp.mail.ru
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×