HTTP 2 Luc Trudeau Département de génie logiciel et des technologies de l information Montréal, Québec, Canada

Transcription

1 Luc Trudeau L ÉTS est une constituante du réseau de l'université du Québec Département de génie logiciel et des technologies de l information Montréal, Québec, Canada

2 Pourquoi Log540? En 2012, les ingénieurs d Apple ont mesuré une amélioration de 300% de la performance de l application suite à un meilleur usage d HTTP. Connaitre ses protocoles c est payant! Département de génie logiciel et des

3 Pourquoi?

4 Vitesse moyenne au Canada: 19 Mbit/s Département de génie logiciel et des

5 HTTP 1.1 Temps de chargement d une page web (ms) Débit de la connexion Le problème n est pas le débit, mais la latence! Ref : More Bandwidth Doesn t Matter (much) Département de génie logiciel et des

6 1 page web > 2MB et > 100 Requêtes! Juillet 2012 à juillet 2015 Ref: Département de génie logiciel et des

7 Attention à l évitement de congestion de TCP! Segments Temps de livraison de N segments CWND 3 CWND Round Trip Time CWND 3 CWND La version (2010) du noyau de Linux, CWND passe de 3 à 10 Département de génie logiciel et des Ref:

8 etsmtl.ca 46 requêtes 1 MB Au minimum 4 RTT pour le site de l ÉTS! CWND 3 CWND 10 RTT CWND 3 CWND En moyenne on parle de 7 à 8 RTT

9 RTT ms ms ms ms ms ms ms Temps chargement 1.53 s 1530 ms / 2 ms = 765 RTT

10 Réduire le nombre de requêtes: Spriting Caching Keep-Alive Solution:

11 Spriting Une seule image (1 requête) contient l ensemble des icônes/images CSS et JavaScript sont utilisés pour extraire l icône nav_logo3.png

12 Spriting à l ÉTS Nous aussi on le fait, ben on essaie css?

13 Oups Spriting à l ÉTS (159 kb) (247kb) (3.2 kb) (9.2kb) Environ ¼ du débit est gaspillé (voici pourquoi ça prend Log540) Département de génie logiciel et des

14 Spriting à l ÉTS Pas tout le temps 842 octets d entête pour 275 octets de payload (>) octets d entête pour 847 octets de payload

15 GET /ETS/media/Prive/Accueil/logo_ets.png?r=d&width=127&height=43 HTTP/1.1! Host: etsmtl.ca! Connection: keep-alive! Cache-Control: max-age=0! Accept: image/webp,*/*;q=0.8! If-None-Match: "9316d0d02bf1ce1:0»! If-Modified-Since: Wed, 04 Dec :02:52 GMT! User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36! (KHTML, like Gecko) Chrome/ Safari/537.36! Referer: Accept-Encoding: gzip, deflate, sdch! Accept-Language: en-us,en;q=0.8,fr;q=0.6! Cookie: CMSPreferredCulture=fr-CA; utma= ! 853 octets ; utmz= utmcsr=google utmccn=(organic) utmcmd=organic utmctr=(not%20provided);! ASP.NET_SessionId=tunzc355rp3fvpe1zl5sf545; _gat=1; _ga=ga ! 837 octets d entête En passant, l image est 83x83

16 GET /ETS/media/ImagesETS/Icone/Fleche/fl_rouge.png HTTP/1.1! Host: etsmtl.ca! Connection: keep-alive! Cache-Control: max-age=0! Accept: image/webp,*/*;q=0.8! If-None-Match: "a82edbf4efbce1:0»! If-Modified-Since: Tue, 17 Dec :33:13 GMT! User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/ (KHTML, like Gecko) Chrome/ Safari/537.36! Referer: Accept-Encoding: gzip, deflate, sdch! Accept-Language: en-us,en;q=0.8,fr;q=0.6! Cookie: CMSPreferredCulture=fr-CA; utma= ; utmz= utmcsr=google utmccn=(organic) utmcmd=organic utmctr=(not%20provided); ASP.NET_SessionId=tunzc355rp3fvpe1zl5sf545; _gat=1; _ga=ga ! 842 octets d entête 245 octets La majorité du contenu était déjà présent dans la requête précédente

17 HTTP Keep Alive Département de génie logiciel et des

18 HTTP Pipelining

19 Head of line blocking Client Serveur Keep alive En théorie" Département de génie logiciel et des

20 Ouvrir plusieurs connexions Les fureteurs ouvrent 6 connexions par nom de domaine pour obtenir le contenu d une page web

21 (15 May 2015) On ne remplace pas HTTP On conserve les méthodes, les codes et la majorité des entêtes Ce qui change, c est comment, on communique HTTP Département de génie logiciel et des

22 Démo

23 Objectif: HTTP2 UNE SEULE CONNEXION (TCP)

24 HTTP2 1 seule connexion TCP Plusieurs requêtes (Stream) Les Streams sont multiplexées (plusieurs en même temps) Les Streams sont priorisées Les paquets sont binaires avec des préfix de longueur

25 Multiplexage HTTP 1.1 Plusieurs connexions 1 Connexion plusieurs Streams

26 vs HTTP 1.1 Client Connexion TCP Serveur Client Serveur Stream 1 Stream 2 Stream 3

27

28 Trame (Frame)

29

30 Initialisation par HTTP 1.1 GET /page HTTP/1.1 Host: server.example.com Connection: Upgrade, HTTP2-Settings Upgrade: h2c 1 HTTP2-Settings: (SETTINGS payload) 2 HTTP/ OK 3 Content-length: 243 Content-type: text/html (... HTTP/1.1 response...) (ou) HTTP/ Switching Protocols 4 Connection: Upgrade Upgrade: h2c (... HTTP/2 response...)

31 Les entêtes HTTP 167 octets curl -vv -d'{"msg":"i LOVE ETS"}' * Connected to ( ) port 80 (#0) > POST / HTTP/1.1 > User-Agent: curl/ > Host: > Accept: */* > Content-Length: 20 > Content-Type: application/x-www-form-urlencoded Optimisations HTTP2 Compression des entêtes (HPACK) Entête de connexion vs entête de requête

32 Google Twitter Facebook Qui utilise SPDY? % des sites web sur SPDY 5% des sites uylisent SPDY 0.6% uylisent HTTP2

33 Qui d autre utilise SPDY? Ceux qui sont sur leur laptop, allez au lien suivant: chrome://net- internals#spdy Vous!