Présentation à Alchimie 0xb (novembre 2015) par Christophe Villeneuve (Hello / Sector One)

1. Le Web en HTTP/2Le Web en HTTP/2
Christophe Villeneuve
@hellosct1

2. Qui... est Christophe Villeneuve ?Qui... est Christophe Villeneuve ?
<<
afup – lemug.fr – mysql – mariadb – drupal – demoscene – firefoxos – drupagora – phptour – forumphp – solutionlinux – demoinparis – ici et maintenant – eyrolles – editions eni – programmez – linux pratique – webriver – phptv – neuros - elephpant

3. Aujourd'hui...Aujourd'hui...
● L'origine du commencement
● Le protocole web : Http/2
● Steaming HTTP
● WebRTC
● Les conséquences

4. Les datesLes dates
1999 HTTP/1.1
2015 HTTP/2.0
1996 HTTP/1.0
1991 HTTP/0.9

5. HTTP/1.0HTTP/1.0

6. La fin du HTTP/1.1 (1/2)La fin du HTTP/1.1 (1/2)
● 15 ans existance
● Le Poids des pages a augmenté
● Nouvelles façon de consommer le Web
● Emissions de multi-requêtes en parallèles
● Le Web et les API métiers
Webservices
● Pb : Trop de connexions
● HTTP a trop d'options
– Mal utilisé (taille de transferts
– Latence
– ...
(c) Oracle and Orits affiliates
Le poids des pages
2010 : 702 KB (70 requetes)
2014 : 2 MB (100 requetes)

7. La fin du HTTP/1.1 (2/2)La fin du HTTP/1.1 (2/2)
● Streaming media
– Différents protocoles
– RTMP : Flash
– Utilisation partielle du HTTP
– Utilisation du Javascript
● Prévoir différents formats dans une page web
● Nombreuses pertes de paquets
<video controls>
<source src="movie/video1.webm">
<source src="movie/video1.mp4">
<source src="movie/video1.flv">
</video>

8. HTTP/2, qu'est ce ?HTTP/2, qu'est ce ?
● Développé par IETF (HTTP Working Group)
● Basé sur SPDY
– Protocole développé par Google (2009)
– Résoudre les limites de HTTP/1.1
– Gain important sur Firefox, nginx
● Contributeurs :
– Firefox, Chrome,
– Twitter, CURL,
– Akamai...

9. HTTP/2 IllustréHTTP/2 Illustré

10. Intérêt HTTP/2

11. HTTP/2 : Multiplexage (1/3)HTTP/2 : Multiplexage (1/3)
● Multiplexage des requêtes au serveur
● Plusieurs informations/demandes
– dans la même connexion TCP
● Exécution de requêtes en simultanés
par le navigateur
– Ex : CSS, images, JS…
● Avant Ordre et blocage
● Connexion en parallèle
● Sharding sur plusieurs domaines pour faire
des requetes en parallèle/enlever les cookies

12. HTTP/2 : Multiplexage (2/3)HTTP/2 : Multiplexage (2/3)

13. HTTP/2 : Multiplexage (3/3)HTTP/2 : Multiplexage (3/3)
● HTTP/1.1
● HTTP/2

14. HTTP/2 : Stream dependencies (1/2)HTTP/2 : Stream dependencies (1/2)
● Permet aux serveurs de 'pousser' les réponses de manière
proactive dans les caches des clients
● Possible d'indiquer au serveur les ressources les plus
importantes

15. HTTP/2 : Stream dependencies (2/2)HTTP/2 : Stream dependencies (2/2)

16. HTTP/2 : HeadersHTTP/2 : Headers
● Compression des requêtes et des réponses
● Binaire (avant c'était du textuelle)
● Compresser les actifs
Referer, Cookie's…
● Réduire la charge

17. HTTP/2 : Server push (1/2)HTTP/2 : Server push (1/2)
● Plusieurs connexions (parallélisme)
● Le plus pour les Systèmes d'informations
● Serveur peut envoyer des ressources vers l'internaute avant de
les demandés
– Images, CSS, Javascript
● Utilisation du cache
● Equilibrer les performances et l'utilité

18. HTTP/2 : Server push (1/2)HTTP/2 : Server push (1/2)

19. Et… La réalité

20. On évite...On évite...
● Quelques fonctionnalités HTTP/1.1
– Domaine fragmentation
– L'image spriting
– Ressources en doublure
– Concaténation

21. WebPerf ?WebPerf ?
● Optimisation de la couche TCP
– Plusieurs connexions en TCP
– Durée de connexion plus longue
et unique
– Plus de perte de paquets

22. Sécurité ?Sécurité ?
● Chiffrement
● Sécurité de la navigation
● Intérêt pour le TLS
● Chiffrement des échanges
– Serveurs ↔ navigateurs

23. Let's GO...Let's GO...
● Compatibilité
– Akamai
– Les Navigateurs
● Chrome 40, Firefox 36, IE 11
– Curl
– Langage

24. Les impacts pour nous

25. DéveloppementDéveloppement
● Compatibilité avec API HTTP
● Très peu de changements
● Meilleurs résultats au niveau de la ressource
Client ↔ serveur

26. PHPPHP
● CURL
Request
$this->proxy->request
Reponse
$this->proxy->response
Debug
$this->proxy->debug_str

27. Image HTMLImage HTML
<img
src="data:image/png;base64,iVBORw0KGgoAAA
ANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/
w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Point
rouge" />
http://en.wikipedia.org/wiki/Data_URI_scheme

28. CSS avec plusieurs imagesCSS avec plusieurs images
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif') -91px 0;
}http://www.w3schools.com/css/css_image_sprites.asp

29. HTTP URIHTTP URI
GET / HTTP/1.1
Host: server.example.com
Connection: Upgrade, HTTP2-Settings
Upgrade: h2c
HTTP2-Settings: <base64url encoding of HTTP/2 SETTINGS
payload>

30. ServeurServeur
Support
HTTP/2

32. Demo AkamaiDemo Akamai
● Affiche une image (environ 750 ko)
demo concept inspired by Golang's Gophertiles

33. Débug DevTools FirefoxDébug DevTools Firefox
https://developer.mozilla.org/en-US/docs/Mozilla/Projects/NSS/Key_Log_Format

34. MerciMerci
● Plus loin
– https://http2.github.io/
– http://daniel.haxx.se/http2/
–
● Sources
– Ed Burns
– Mark Nottingham
Questions
@hellosct1