Марина Широчкина: Верстка. Вид снизу

6,875 views
6,731 views

Published on

Марина Широчкина: Верстка. Вид снизу

  1. 1. Верстка. Вид снизу.
  2. 2. Для начала
  3. 3. Качество сети •  Delay (+ jitter) 4
  4. 4. Качество сети •  Delay (+ jitter) •  Bandwidth 5
  5. 5. Качество сети •  Delay (+ jitter) •  Bandwidth •  Packet loss 6
  6. 6. Они сильно влияют на скорость 7
  7. 7. Например «Драматическая история одной маленькой промостраницы», Олег Мохов 8
  8. 8. Загрузка одного файла
  9. 9. Скриншот из wireshark-а 10
  10. 10. 1. DNS lookup 11
  11. 11. Время DNS lookup •  есть в кеше клиента (0 мс) 12
  12. 12. Время DNS lookup •  есть в кеше клиента •  есть в кеше DNS-сервера провайдера (единицы мс) 13
  13. 13. Время DNS lookup •  есть в кеше клиента •  есть в кеше DNS-сервера провайдера •  DNS-сервер знает про зону (+RTT от провайдера до NS) 14
  14. 14. Время DNS lookup •  есть в кеше клиента •  есть в кеше DNS-сервера провайдера •  DNS-сервер знает про зону •  DNS-сервер вообще ничего не знает (+RTT до root server, +RTT до NS) 15
  15. 15. 16
  16. 16. 2. Установка соединения 17
  17. 17. Установка соединения 18
  18. 18. Установка соединения = минимум 1 RTT до фронтенда Примеры: •  RTT из питерского офиса Яндекса до e1.ru ≈ 60мс •  RTT из Екатеринбурга до московских серверов Яндекса ≈ 30мс 19
  19. 19. 3. Отправка запроса и начало получения данных 20
  20. 20. Отправка запроса и начало получения данных = 1 RTT до фронтенда + время обработки на сервере 21
  21. 21. 4. Передача данных 22
  22. 22. Возьмем пример Сырой HTML (до сжатия) www.e1.ru: 109699 байт. (+ ≈ 200 байт заголовков). 23
  23. 23. MSS MSS – maximum segment size (максимальный размер сегмента). Определяется при установке соединения 24
  24. 24. MSS 25
  25. 25. Почему 1460? MTU (maximum transmission unit) – максимальный размер блока данных одного пакета, который может быть передан без фрагментации. Ограничен снизу допустимой длиной кадра. 26
  26. 26. Возьмем пример Сырой HTML (до сжатия) www.e1.ru: 109699 байт (+ ≈ 200 байт заголовков). Это 76 пакетов по 1460 байт. 27
  27. 27. Драматический момент Если бы мы отправляли по пакету за раз, это заняло бы 76 RTT или 4560 мс 28
  28. 28. TCP Receive Window Количество данных, которые машина готова принять за раз. 29
  29. 29. Congestion Window Определяет количество байт, которые могут быть посланы за раз. 30
  30. 30. Вернемся к примеру Размер окна: 15744 байт В него влезет 10 целых сегментов. 31
  31. 31. Вернемся к примеру ≈ 110Кб HTML ≈ 76 пакетов ≈ 8 RTT ≈ 480 мс (если размер окна не будет меняться) 32
  32. 32. Потеря пакетов •  пакет придется перепослать •  размер congestion окна будет уменьшен P.S. 15 - 20 % потерь – практически неработающий интернет 33
  33. 33. Итого загрузка файла: dns lookup + соединение + запрос + ответ = = 0 мс + 1 RTT + 8 RTT = = 0 + 60 + 480 = 540 мс 34
  34. 34. Теперь про оптимизации
  35. 35. 1. gzip Для нашего примера: ≈ 110Кб -> ≈ 20.5Кб ≈ 76 сегментов -> ≈ 15 сегментов ≈ 8 RTT -> 2 RTT ≈ 480 мс -> 120 мс 36 или или или
  36. 36. 2. Минификация и обфускация style_new.css: •  сырой (до gzip): 17703 байт •  минифицированный: 9350 байт •  после gzip: 1830 байт •  минифицированный + gzip: 1713 байт 37
  37. 37. 100 байт разницы 38
  38. 38. 100 байт разницы – много или мало? •  лишние байты каждый раз •  могут добавить +1 сегмент и +1 RTT 39
  39. 39. 3. Сжатие картинок Пример (самый простой): http://www.e1.ru/news/images/ 398/325/398325/70x46_1.jpg •  jpeg: 51Кб, при размере 70x46 •  jpeg без профиля, EXIF и т д: 4,4 Кб 40
  40. 40. 3. Сжатие картинок 51 Кб ≈ 35 сегментов ≈ 4 RTT ≈ 240 мс 4,4 Кб ≈ 3 сегмента ≈ 1 RTT ≈ 60 мс 41
  41. 41. 4. Cookies для статики •  205 байт (лишних) для каждого запроса •  50-60 запросов за статикой 42
  42. 42. 5. География и CDN-ы Чем ближе к пользователю – тем меньше RTT, а значит, тем быстрее будет грузиться контент. 43
  43. 43. 5. География и CDN-ы CDN - Content Delivery Network или Content Distribution Network (собственные или коммерческие) 44
  44. 44. Загрузка нескольких файлов
  45. 45. 1. Одновременные загрузки http://www.browserscope.org/?category=network 46
  46. 46. Одновременные загрузки www.e1.ru: 85 запросов Из них к одному хосту: 66 запросов 47
  47. 47. 48
  48. 48. Раздавать статику с нескольких доменов 49
  49. 49. 2. Склейка файлов •  объединять стили и скрипты 50
  50. 50. 2. Склейка файлов •  объединять стили и скрипты •  склеивать картинки в спрайты 51
  51. 51. 3. Keep Alive 52
  52. 52. Keep Alive В указанном примере: 13 запросов за одно соединение. Экономим на 12 соединениях, т. е. на 12 RTT 53
  53. 53. 4. Инлайн •  увеличивает вес основной страницы •  уменьшает количество запросов 54
  54. 54. 5. Кеширование статики Профит от кеширования очевиден. 55
  55. 55. Некоторое резюме
  56. 56. Сеть - это очень дорого 57
  57. 57. Сеть - это очень дорого 58
  58. 58. Сеть - это очень дорого Понимание того, что происходит в сети, очень важно 59
  59. 59. Рекомендуется к прочтению http://chimera.labs.oreilly.com/books/ 1230000000545 Ilya Grigorik, “High Performance Browser Networking” 60

×